Shadcn: move theme tokens into tailwind.css, fix device dark mode, new theme switcher - #741
Open
hdprajwal wants to merge 2 commits into
Open
Shadcn: move theme tokens into tailwind.css, fix device dark mode, new theme switcher#741hdprajwal wants to merge 2 commits into
hdprajwal wants to merge 2 commits into
Conversation
…ld theme switcher
…me switcher group
Contributor
Cloudflare Pages preview
|
Comment on lines
+50
to
+52
| (themeKey: Theme) => { | ||
| setTheme(themeKey); | ||
| }, |
Collaborator
There was a problem hiding this comment.
nit: compress lines when it makes the code cleaner and it still readable
Suggested change
| (themeKey: Theme) => { | |
| setTheme(themeKey); | |
| }, | |
| (themeKey: Theme) => setTheme(themeKey), |
conradarcturus
approved these changes
Jul 31, 2026
conradarcturus
left a comment
conradarcturus
left a comment
Collaborator
There was a problem hiding this comment.
Some minor comments, nonetheless thanks for keeping this going! There is a lot too this migration 0_o.
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
2 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.
Summary: Move all the color values into
tailwind.cssso Tailwind and shadcn own the theme, fix dark mode when the brightness preference is "follow device", and rebuild the page brightness control in the settings panel.Changes
darkclass on<html>in that mode, so the shadcn theme tokens stayed on their light values while the rest of the page went dark. OnlyButtonis installed today and its default variant happens to look right either way, so nothing visibly broke yet.src/app/tailwind.cssnow holds every color value, in a:rootblock for light and a.darkblock for dark. It also adds tokens shadcn has no name for (--primary-hover,--accent-subtle,--highlight) and the named colors used for data and status (--redthrough--purple), all exposed through@theme inline.src/app/colors.csswent from 108 lines to a 10 line alias block. It maps the old--color-*names onto the new tokens so the CSS and inline styles that are not migrated yet keep working. It shrinks as components move to Tailwind.usePageBrightnessalways puts an explicitlightordarkclass on<html>, including in "follow device" mode, and listens for device theme changes.index.htmlhas a small inline script that sets that class before the first paint.ThemeSwitcherinsrc/shared/ui/, plus a smalluseControllableStatehook so it works either controlled or uncontrolled.localStoragereads and writes are wrapped in try/catch. This hook runs in the outermost provider, so an error there would blank the whole app instead of just losing the setting.dark:variant now matches the.darkelement itself as well as its children, sodark:classes work on<html>.ThemeToggle.css, 109 lines. The switcher is all Tailwind classes now.TextInput.test.tsxmocked all oflucide-reactwith a single icon. Changed it to a partial mock, because it broke as soon as another icon showed up anywhere in its imports.Out of scope/Future work:
--color-*name against the production build and each one resolves to the same value it had before, in both light and dark. Swapping them for Tailwind's palette is a separate change.--cardand--popoverare the same as--backgroundin dark mode. Nothing renders them today. Once a shadcn popover, dropdown or card lands they will need a lighter value or they will be invisible against the page.--destructiveis#df7e7c, which is too low contrast to use as text. Nothing uses it yet.@themevariables whose names it finds in the source. Every one the old CSS needs is in the build today and I checked each one, but it is worth knowing about.@theme staticwould make it certain.dark:variant uses:where(), so it has no specificity of its own and depends on the order Tailwind writes the rules. That is correct in the current build.useMediaQueryis left alone.Test Plan
How to test the changes in this PR: run
npm run devand open the settings menu on any page. Try all three brightness options and check the page follows each one. Set it to system, then change your OS theme while the page is still open, and check that both the page and the navbar logo follow. Reload on a dark device and check there is no white flash. Then look at the Data page and the About page in both light and dark for anything that changed by accident.Checklist
Summary
Testing
npm run lintnpm run buildnpm run test-- 69 files, 436 tests passingnpm run dev-- tried out the website directly, in light, dark and system, and on the Intro, Data and About pagesChanges
Visual changes
Internal changes
index.htmlcannot be removed, why the switcher buttons setdata-slot, and whycolors.cssis only a temporary alias layerDocs