Add automatic theme switching based on browser preferences #55
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implement idiomatic CSS-based theme switching using prefers-color-scheme media queries. The explorer now automatically adapts between light and dark themes based on the user's system/browser preference. Changes: - Add light and dark theme color schemes using @media queries - Update v2 colors.css with theme-aware CSS custom properties - Update v3 style.css with theme-aware CSS custom properties - Update Ace editor theme to use CSS variables for theme support - Convert entity tree SVG lines to use CSS classes for theming - Support both legacy (v2) and modern (v3) versions The implementation uses CSS custom properties (variables) that change based on prefers-color-scheme, making it work automatically without JavaScript. All colors adapt seamlessly when users switch their OS theme preference.
Address visibility issues where light-colored icons and UI elements were not visible against light backgrounds in light mode. Changes: - Add CSS filters to invert icons in light theme (v2 and v3) - Icons now appear dark on light backgrounds - Add theme-aware tree selection background color - Entity tree selection now uses --tree-select-bg variable - Light theme uses grey-300 for selection (visible on light bg) - Dark theme uses steel-650 for selection (visible on dark bg) - Apply inversion to all icon types: span.icon, entity-tree-icon, navigation icons, status icons, etc. - Inversion includes brightness adjustment for better contrast Fixes issues with: - Sidebar icons being invisible in light mode - Expander arrows (> nav-right) being invisible - Tree selection highlighting not visible - Other UI icons appearing washed out
Member
|
This is useful, but would need a light/dark button to let people switch manually if they want to. |
Member
|
There are also a couple of readability issues that would have to get fixed. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Not perfect but
Implement idiomatic CSS-based theme switching using prefers-color-scheme media queries. The explorer now automatically adapts between light and dark themes based on the user's system/browser preference.
Changes:
The implementation uses CSS custom properties (variables) that change based on prefers-color-scheme, making it work automatically without JavaScript. All colors adapt seamlessly when users switch their OS theme preference.