Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 fix: improve dark mode and OS theme handling #380

Merged
merged 1 commit into from
Sep 12, 2024

Conversation

welpo
Copy link
Owner

@welpo welpo commented Sep 12, 2024

Summary

Ensure dark theme applies when explicitly set or by OS preference. Solves styling inconsistencies.

Related issue

Resolves #379. Bug introduced in #357. Discussion started in #378.

Changes

Consistently applies styling for dark/light mode, regardless of OS theme, default tabi theme, and theme switcher status (enabled/disabled).

Specifically:

  • Skins now work properly when OS theme is set to dark.
  • Refactored skins and theme variables to use a mixin for consistency.
  • Fixes social icons (footer) being the wrong colour when (1) theme switcher was disabled, (2) default_theme was unset in config.toml, and (3) the OS was set to dark theme.
  • Fixes a similar issue with admonition styling (see screenshots).
  • Simplifies SCSS for admonitions, making it more maintainable.

Accessibility

The changes improve accessibility by ensuring proper contrast in dark mode for various elements.

Screenshots

Issue with social icons:

footer

Issue with admonition styling:

admonitions

Type of change

  • Bug fix (fixes an issue without altering functionality)
  • New feature (adds non-breaking functionality)
  • Breaking change (alters existing functionality)
  • UI/UX improvement (enhances user interface without altering functionality)
  • Refactor (improves code quality without altering functionality)
  • Documentation update
  • Other (please describe below)

Checklist

  • I have verified the accessibility of my changes
  • I have tested all possible scenarios for this change
  • I have updated theme.toml with a sane default for the feature
  • I have made corresponding changes to the documentation:
    • Updated config.toml comments
    • Updated theme.toml comments
    • Updated "Mastering tabi" post in English
    • (Optional) Updated "Mastering tabi" post in Spanish
    • (Optional) Updated "Mastering tabi" post in Catalan

@welpo welpo added the bug Something isn't working label Sep 12, 2024
Copy link

netlify bot commented Sep 12, 2024

Deploy Preview for tabi-demo ready!

Name Link
🔨 Latest commit a9f6c23
🔍 Latest deploy log https://app.netlify.com/sites/tabi-demo/deploys/66e3554e3ca5160008e5b76b
😎 Deploy Preview https://deploy-preview-380--tabi-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@welpo welpo force-pushed the fix/improve-dark-mode-handling branch from bea9f15 to f311ede Compare September 12, 2024 20:51
- Ensure dark theme applies when explicitly set or by OS preference.
- Fixes issues with admonition styling, skins, and social icons (footer).

Resolves #379.
@welpo welpo force-pushed the fix/improve-dark-mode-handling branch from f311ede to a9f6c23 Compare September 12, 2024 20:55
@welpo welpo merged commit 35dcf55 into main Sep 12, 2024
8 checks passed
@welpo welpo deleted the fix/improve-dark-mode-handling branch September 12, 2024 20:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

skins don't work as intended when OS theme is set to dark
1 participant