Repository navigation
Refresh design tokens and add a system theme preference - #32
Merged
fyui001 merged 3 commits intoJul 9, 2026
Merged
Conversation
Unify the color system on zinc, dropping the blue-tinted primary. Add class-based dark variant wiring, color-scheme declarations, success/warning/info and table-header tokens, a high-contrast focus ring, readable destructive foreground in both modes, and a number-input spinner reset.
Extend the theme from a light/dark toggle to a light/dark/system preference. The middleware forwards the cookie on every page (the login page previously never received the theme header and always rendered light), the layout sets the dark class at SSR for explicit choices, and an inline no-flash script resolves the OS scheme before hydration when the preference is system. The header toggle becomes a three-option dropdown, the display settings switch becomes a select, and Storybook gains a light/dark toolbar plus the a11y addon.
Key the preview ThemeProvider by the toolbar theme so its state re-initializes when switching, and add SameSite=Lax to the sidebar cookie for parity with the theme cookie.
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
dark:utilities previously followed the OS media query instead of the.darkclass (no@custom-variant dark), so OS-dark users saw dark styles leak into the light theme.--destructive-foregroundwas the same value as--destructivein both modes, making destructive button labels unreadable./and/auth/login, so those pages always rendered light regardless of the saved theme.darkclass at SSR (no flash), andsystemis resolved by a constant inline script before hydration.@storybook/addon-a11y(test: 'todo'), and stories updated for the new APIs.Behavior notes
systemand the OS is dark, BlockNote's JS-driven editor colors can lag one frame after mount; the page CSS itself is correct from first paint.Verification
yarn typecheck/yarn lint/yarn buildgreen.class="dark"for the dark cookie, injects the no-flash script only forsystem/unset, the login page honors the saved theme, and/logout//debug-authbehave as before.