fix: restore theme toggle and dark mode support across the app#418
Open
YagUber wants to merge 6 commits intocedya77:devfrom
Open
fix: restore theme toggle and dark mode support across the app#418YagUber wants to merge 6 commits intocedya77:devfrom
YagUber wants to merge 6 commits intocedya77:devfrom
Conversation
The static dark class on the root div prevented ThemeProvider from dynamically applying themes, locking the UI in dark mode permanently.
Default theme falls back to system preference via prefers-color-scheme instead of hardcoded dark. - Apply color-scheme CSS property and meta color-scheme tag to inform the browser of supported themes
Previously defaulted to white on both light and dark themes.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
The app was permanently locked in dark mode due to a hardcoded
darkclass on the root div, making the theme toggle have no visible effect.This PR fixes that and addresses several follow up theming issues across the app.
Changes
Removes hardcoded
darkclass fromApp.tsxthat was locking the UI in dark mode permanently.Fixes
defaultThemeto"system"so first time visitors get their OS preference instead of always dark.Applies
color-schemeCSS property dynamically and adds<meta name="color-scheme">toindex.htmlso native browser elements render correctly in both themes.Replaces hardcoded
bg-*-50backgrounds in dashboard cards with opacity-based equivalents (e.g.bg-blue-500/10) so they adapt to both themes.Adds a
successbadge variant to the Badge component for consistent green "healthy" status indicators across the UI.Refactors Provider Status badges to use the existing
statusConfigobject from System Health, sharing dot/badge/label styles across both cards.Fixes Smart Fallback alert contrast in light mode.