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

Enable dark theme if user prefers dark color scheme - no javascript version #4761

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

AntonKhorev
Copy link
Contributor

@AntonKhorev AntonKhorev commented May 6, 2024

We probably can enable dark mode now.

This version uses system settings with media queries and doesn't need javascript. It is enabled by the Bootstrap option $color-mode-type: media-query. Previous version #4653 used javascript to track system settings and change data-bs-theme attributes accordingly.

The problem with this no-javascript approach is that data-bs-theme attributes are ignored. But we're already using them for inverting close buttons on dark banners. When in light mode, dark banners have their close buttons inverted because banners themselves have a dark theme attribute. Aside from not working with $color-mode-type: media-query, this approach has another drawback: you can't invert buttons on light banners in dark mode. Once the entire webpage gets its dark mode attribute, you can't go back to light mode.

The solution in this PR is:

  • use $color-mode-type: media-query that will take care of most of light/dark mode styling
  • use data-bs-theme on banners
  • add css to enable/disable close button inversion inside elements with data-bs-theme

image
image
image
image

@AntonKhorev AntonKhorev marked this pull request as draft May 9, 2024 14:07
@AntonKhorev
Copy link
Contributor Author

AntonKhorev commented May 9, 2024

Was conflicting with scale control color fixes, now updated.

@AntonKhorev AntonKhorev force-pushed the dark-mode-with-close-button branch from f53c580 to 5e1093e Compare May 9, 2024 14:16
@AntonKhorev AntonKhorev marked this pull request as ready for review May 9, 2024 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant