diff --git a/src/theme/theme.css b/src/theme/theme.css index 34a0051..fdecc82 100644 --- a/src/theme/theme.css +++ b/src/theme/theme.css @@ -1,6 +1,16 @@ +/* + ConvertX theme tokens + + Strategy: + - Default (no explicit override): follow OS preference via prefers-color-scheme. + - Manual override: set . + - JS sets/clears data-theme based on localStorage (see /public/theme.js). +*/ + :root { - /* Light mode */ + /* Light mode (default tokens) */ --contrast: oklch(100% 0 0); + /* Neutral colors - Gray */ --neutral-950: oklch(98.5% 0.002 247.839); --neutral-900: oklch(96.7% 0.003 264.542); @@ -13,6 +23,8 @@ --neutral-200: oklch(26.9% 0 0); --neutral-100: oklch(21% 0.034 264.665); --neutral-50: oklch(13% 0.028 261.692); + + /* Accent (lime) */ /* lime-700 */ --accent-600: oklch(53.2% 0.157 131.589); /* lime-600 */ @@ -21,11 +33,60 @@ --accent-400: oklch(76.8% 0.233 130.85); } +/* Manual override: dark */ +:root[data-theme="dark"] { + --contrast: oklch(0% 0 0); + + /* Neutral colors - Gray */ + --neutral-950: oklch(13% 0.028 261.692); + --neutral-900: oklch(21% 0.034 264.665); + --neutral-800: oklch(27.8% 0.033 256.848); + --neutral-700: oklch(37.3% 0.034 259.733); + --neutral-600: oklch(44.6% 0.03 256.802); + --neutral-500: oklch(55.1% 0.027 264.364); + --neutral-400: oklch(70.7% 0.022 261.325); + --neutral-300: oklch(87.2% 0.01 258.338); + --neutral-200: oklch(92.8% 0.006 264.531); + --neutral-100: oklch(96.7% 0.003 264.542); + --neutral-50: oklch(98.5% 0.002 247.839); + + /* Accent (lime) */ + /* lime-600 */ + --accent-600: oklch(64.8% 0.2 131.684); + /* lime-500 */ + --accent-500: oklch(76.8% 0.233 130.85); + /* lime-400 */ + --accent-400: oklch(84.1% 0.238 128.85); +} + +/* Manual override: light (kept explicit for completeness) */ +:root[data-theme="light"] { + --contrast: oklch(100% 0 0); + + /* Neutral colors - Gray */ + --neutral-950: oklch(98.5% 0.002 247.839); + --neutral-900: oklch(96.7% 0.003 264.542); + --neutral-800: oklch(92.8% 0.006 264.531); + --neutral-700: oklch(87.2% 0.01 258.338); + --neutral-600: oklch(70.7% 0.022 261.325); + --neutral-500: oklch(55.1% 0.027 264.364); + --neutral-400: oklch(44.6% 0.03 256.802); + --neutral-300: oklch(37.3% 0.034 259.733); + --neutral-200: oklch(26.9% 0 0); + --neutral-100: oklch(21% 0.034 264.665); + --neutral-50: oklch(13% 0.028 261.692); + + /* Accent (lime) */ + --accent-600: oklch(53.2% 0.157 131.589); + --accent-500: oklch(64.8% 0.2 131.684); + --accent-400: oklch(76.8% 0.233 130.85); +} + +/* Default behavior (no manual override): follow OS preference */ @media (prefers-color-scheme: dark) { - /* Dark mode */ - :root { + :root:not([data-theme]) { --contrast: oklch(0% 0 0); - /* Neutral colors - Gray */ + --neutral-950: oklch(13% 0.028 261.692); --neutral-900: oklch(21% 0.034 264.665); --neutral-800: oklch(27.8% 0.033 256.848); @@ -37,11 +98,9 @@ --neutral-200: oklch(92.8% 0.006 264.531); --neutral-100: oklch(96.7% 0.003 264.542); --neutral-50: oklch(98.5% 0.002 247.839); - /* lime-600 */ + --accent-600: oklch(64.8% 0.2 131.684); - /* lime-500 */ --accent-500: oklch(76.8% 0.233 130.85); - /* lime-400 */ --accent-400: oklch(84.1% 0.238 128.85); } }