feat(08-01): define MD3 color tokens and flash prevention script

- Add @custom-variant dark directive for .dark class-based toggling - Define 15 CSS custom property token pairs (light/dark) in @layer base - Map all tokens to Tailwind utility classes via @theme with var() references - Include warning/success tokens (amber + green) for ReviewStep coverage - Add body transition with prefers-reduced-motion guard - Add inline blocking script in index.html head to prevent FOUC
2026-04-01 04:33:31 +02:00
parent 2ea0a1faaf
commit 602755276e
2 changed files with 90 additions and 0 deletions
@@ -2,6 +2,28 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <script>
+      (function() {
+        try {
+          var stored = localStorage.getItem('r2b-theme');
+          var effective;
+          if (stored === 'dark') {
+            effective = 'dark';
+          } else if (stored === 'light') {
+            effective = 'light';
+          } else {
+            effective = window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light';
+          }
+          if (effective === 'dark') {
+            document.documentElement.classList.add('dark');
+          }
+        } catch (e) {
+          // localStorage unavailable (private mode, etc.) — leave light as default
+        }
+      })();
+    </script>
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ready2Blob</title>