feat(frontend): add light/dark theming with theme picker#300
feat(frontend): add light/dark theming with theme picker#300marcalexiei wants to merge 4 commits into
Conversation
|
@marcalexiei is attempting to deploy a commit to the martin-mfg's projects Team on Vercel. A member of the Team first needs to authorize it. |
martin-mfg
left a comment
martin-mfg
left a comment
There was a problem hiding this comment.
Nice, I expected this to be among the first feature requests from new users, to add a dark mode. ;) Good to be ahead of this.
-
Could you please use the "github_dark" theme for cards in the login step in dark mode?
-
A selected text input had a colored border before:
Now it has a black extra border with uneven padding instead:
Is this intentional? If not, let's revert to the old approach. -
For the "transparent" and "ambient_gradient" card themes, can we use a light backdrop in light mode and a dark backdrop in dark mode? I think both card themes are well suited for both modes.
-
For "highcontrast" and "chartreuse-dark", a light backdrop is created although these themes have dark backgrounds.
-
The hover effect of the "GitHub Public Access" button is barely visible. Can we make this stronger?
-
The "GitHub Private Access" and "Continue as Guest" button now use grey text, which makes them slightly harder to read. Is this intended? Otherwise I'd revert to black text there.
-
Do you think it would make sense to sort the card themes in step 4 to list all light themes first and all dark themes afterwards?
| <script> | ||
| // Apply the persisted (or system) theme before first paint to avoid a flash. | ||
| // Also suppress color transitions until after the first paint so elements | ||
| // don't animate from their unstyled state on load. | ||
| (function () { | ||
| try { | ||
| var stored = localStorage.getItem("theme"); | ||
| const matchesDarkTheme = window.matchMedia( | ||
| "(prefers-color-scheme: dark)", | ||
| ).matches; | ||
| var theme = stored || (matchesDarkTheme ? "dark" : "light"); | ||
| document.documentElement.setAttribute("data-theme", theme); | ||
| document.documentElement.classList.add("no-transitions"); | ||
| } catch (e) {} | ||
| })(); | ||
| </script> |
There was a problem hiding this comment.
Does this code have any visible effect? I tried with and without it and couldn't spot a difference.
There was a problem hiding this comment.
Yes, but only when the saved theme differs from the OS preference DaisyUI's --prefersdark covers the OS default, and nothing in React sets data-theme on mount, so the script is what applies a saved theme on reload (e.g., OS light + saved Dark). The "persists across reload" e2e test relies on it.
marcalexiei
left a comment
marcalexiei
left a comment
There was a problem hiding this comment.
- Could you please use the "github_dark" theme for cards in the login step in dark mode?
Done.
- A selected text input had a colored border before. Now it has a black extra border with uneven padding instead. Is this intentional? If not, let's revert to the old approach.
Not intentional (it came from the DaisyUI input class). Reverted to the old bordered style, now theme-aware.
- For the "transparent" and "ambient_gradient" card themes, can we use a light backdrop in light mode and a dark backdrop in dark mode? I think both card themes are well suited for both modes.
Done — these now follow the app mode (light backdrop in light mode, dark in dark mode).
- For "highcontrast" and "chartreuse-dark", a light backdrop is created although these themes have dark backgrounds.
Their bg_color is the 3-digit "000", which the luminance check rejected. Short hex is now expanded, so both read as dark.
- The hover effect of the "GitHub Public Access" button is barely visible. Can we make this stronger?
Done — the primary hover now darkens more (18% vs DaisyUI's default ~7%).
- The "GitHub Private Access" and "Continue as Guest" button now use grey text, which makes them slightly harder to read. Is this intended? Otherwise I'd revert to black text there.
Not intended. They're now solid neutral buttons with a proper background and high-contrast text.
- Do you think it would make sense to sort the card themes in step 4 to list all light themes first and all dark themes afterwards?
Ok. Now order is light, adaptive and dark.
Maybe in the future we can add a more distinctive division between them.
…olors - make title of "gradient" theme visible also in dark and light mode - cards use dark theme in dark mode in step 2 and 3 - cards use corresponding backdrop in all steps - restore hover effect for cards with backdrops - restore cursor pointer for card buttons - custom focus style for <select> and <input> - change several colors
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
change "delete account" related colors
martin-mfg
left a comment
martin-mfg
left a comment
There was a problem hiding this comment.
I have added several changes to this PR:
- make title of "gradient" theme visible in dark and light mode
- cards use dark theme in dark mode in step 2 and 3
- cards use corresponding backdrop also in step 2
- restore hover effect for cards with backdrops
- restore cursor pointer for card buttons
- custom focus style for and
- change several colors
From my perspective it can be merged now. But first I would like to ask for a review from you for my changes.
2 participants
Adds light/dark theming to the frontend using the existing DaisyUI + Tailwind setup.
localStorage.The toggle and each option show a sun/moon icon (shared
ThemeIconcomponent) so light/dark are easy to tell apart.Buttonnow usesvariant/size/outlineprops instead of rawbtn-*classes.prefers-reduced-motion.Step 1
Step 4