Global CSS Design Tokens & Light/Dark Mode Toggle#33
Open
YusufsDesigns wants to merge 1 commit intoGroup1-OSS:mainfrom
Open
Global CSS Design Tokens & Light/Dark Mode Toggle#33YusufsDesigns wants to merge 1 commit intoGroup1-OSS:mainfrom
YusufsDesigns wants to merge 1 commit intoGroup1-OSS:mainfrom
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
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.
✨ Global CSS Design Tokens & Light/Dark Mode Toggle
Overview
This PR lays the foundational styling infrastructure for the app. It introduces a full set of global CSS custom properties (design tokens) and implements a light/dark mode toggle that persists the user's preference across sessions.
All tokens are defined on
:rootand automatically apply to every component teammates build — no extra work needed to support theming.Changes
style.css:rootcovering:--color-primary,--color-bg,--color-surface,--color-border,--color-text-*, etc.)--font-sans,--font-mono,--text-xs→--text-2xl,--font-weight-*)--space-1→--space-12)--radius-*,--shadow-sm,--shadow-md)--transition-fast,--transition-normal)[data-theme="dark"]overrides on<html>that swap all surface, background, border, and text color tokensbody,#app) to consume the new tokens#main-headerand the#theme-togglebutton, including hover, focus-visible, and transition statesindex.html#main-headerwith an app title and the theme toggle<button><span class="toggle-icon">), a text label (<span class="toggle-label">), and a descriptivearia-labelfor accessibilityscript.jsgetInitialTheme()— reads fromlocalStoragefirst, falls back to the OSprefers-color-schememedia queryapplyTheme(theme)— sets/removesdata-themeon<html>and syncs the button icon and labeltoggleTheme()— switches the active theme and persists the choice tolocalStorageprefers-color-schemechanges to stay in sync with OS theme switches, but only when the user hasn't manually overridden itDOMContentLoadedto prevent a flash of the wrong theme on loadWhy
data-themeon<html>?Placing the attribute on the root element (rather than a class on
<body>) means any component at any nesting depth can scope dark mode overrides with[data-theme="dark"] .my-componentwithout specificity issues. Teammates don't need to think about theming — just use the token variables and it works in both modes automatically.Why semantic token names?
Tokens like
--color-surfaceand--color-text-secondaryare intentionally named by role, not by value. This means a contributor writing a new component just picks the right semantic token and it resolves to the correct color in both light and dark mode — no hex codes, no conditionals.How to Test
Enter— focus ring should be visible (accessibility check)Notes for Teammates
#main-headernow has content — if you're working on Issue Design Navigation Bar #3 (header component), please build on top of the existing structure rather than replacing itRelated Issues
Closes #14 — Global Theme & Dark Mode Toggle