[{"id":"e795b6d1-4012-411f-953d-1e170dc2f413","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode","styles":{}}],"children":[]},{"id":"499236e2-a431-4ca6-8292-31a8d4f8dd6b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dark Mode","styles":{"bold":true}},{"type":"text","text":" means changing the app color theme from light colors to dark colors.","styles":{}}],"children":[]},{"id":"bf875d32-53fb-4754-8a1b-39ab652e54b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"940c7eb9-9e10-4975-9ad4-bacfee68ad21","type":"procode","props":{"code":"Dark Mode = switch app UI between light theme and dark theme\n","language":"txt","filename":"","files":"[{\"id\":\"om9gzd6dj\",\"name\":\"code\",\"code\":\"Dark Mode = switch app UI between light theme and dark theme\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"235ac69b-e300-4aaf-9863-edc9f6f9c442","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"aa5aefb1-7316-4cef-bfdf-2cc9d23a66f0","type":"procode","props":{"code":"Light mode\n├── white background\n└── dark text\n\nDark mode\n├── dark background\n└── light text\n","language":"txt","filename":"","files":"[{\"id\":\"h74pg9bqh\",\"name\":\"code\",\"code\":\"Light mode\\n├── white background\\n└── dark text\\n\\nDark mode\\n├── dark background\\n└── light text\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a60bfb4-9fb7-4d7b-967f-af310975c00f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS has a ","styles":{}},{"type":"text","text":"prefers-color-scheme","styles":{"code":true}},{"type":"text","text":" media feature that can detect whether the user prefers a light or dark theme from their operating system or browser setting.","styles":{}}],"children":[]},{"id":"fc729268-5d2e-482c-bf3e-ce46fc5431c1","type":"divider","props":{},"children":[]},{"id":"62cfe873-3ce6-4839-b8bd-54052a306f72","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"522e78c1-7c82-487a-a08a-efed2a35c08a","type":"procode","props":{"code":"Dark Mode\n├── Changes background color\n├── Changes text color\n├── Changes border color\n├── Changes card color\n├── Changes input color\n├── Can follow system preference\n├── Can be manually toggled\n├── Can be saved in localStorage\n├── Can use CSS variables\n└── Can use React state, Context, or Zustand\n","language":"txt","filename":"","files":"[{\"id\":\"hmjmswomk\",\"name\":\"code\",\"code\":\"Dark Mode\\n├── Changes background color\\n├── Changes text color\\n├── Changes border color\\n├── Changes card color\\n├── Changes input color\\n├── Can follow system preference\\n├── Can be manually toggled\\n├── Can be saved in localStorage\\n├── Can use CSS variables\\n└── Can use React state, Context, or Zustand\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0803012-b0bf-40b6-b9f8-e7a09ca7b922","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6bf4a2c1-f81b-4edd-a931-24f2a96d8749","type":"procode","props":{"code":"Dark mode is not only background.\nDark mode is a complete color system.\n","language":"txt","filename":"","files":"[{\"id\":\"w9jja7jea\",\"name\":\"code\",\"code\":\"Dark mode is not only background.\\nDark mode is a complete color system.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c188a183-3f2c-40dd-b771-9fc286bb77db","type":"divider","props":{},"children":[]},{"id":"4c8fb94d-4cfa-4964-ae87-2f717b32d549","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic Dark Mode Concept","styles":{}}],"children":[]},{"id":"f8eb3438-fc3f-493b-9faa-986fe88042be","type":"procode","props":{"code":"Theme\n├── light\n└── dark\n","language":"txt","filename":"","files":"[{\"id\":\"siw77qvz3\",\"name\":\"code\",\"code\":\"Theme\\n├── light\\n└── dark\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a02e9fa0-7fb1-4a4a-86d6-454cc77ae5f8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Light theme:","styles":{}}],"children":[]},{"id":"c04dbd1a-4d24-4b9d-bef9-3556b49a2f2b","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111111;\n}\n","language":"css","filename":"","files":"[{\"id\":\"6eqxy4r4g\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111111;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9f981fe9-5e7b-430a-a652-6556d9d05799","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dark theme:","styles":{}}],"children":[]},{"id":"fd855980-d089-422e-bbd7-565c54ab637d","type":"procode","props":{"code":"[data-theme=\"dark\"] {\n --background: #111111;\n --foreground: #ffffff;\n}\n","language":"css","filename":"","files":"[{\"id\":\"fxswbjqv9\",\"name\":\"code\",\"code\":\"[data-theme=\\\"dark\\\"] {\\n --background: #111111;\\n --foreground: #ffffff;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"488dc9d5-8ff5-4a8e-8780-c92543255090","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use variables:","styles":{}}],"children":[]},{"id":"18280c9e-eeac-442f-9dbd-7d553fea4d04","type":"procode","props":{"code":"body {\n background: var(--background);\n color: var(--foreground);\n}\n","language":"css","filename":"","files":"[{\"id\":\"6nzqnfjr8\",\"name\":\"code\",\"code\":\"body {\\n background: var(--background);\\n color: var(--foreground);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0836e493-62d1-4d44-882c-63437c564885","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d797652f-ed3d-4757-9e26-7dec83768fb9","type":"procode","props":{"code":"Change CSS variables.\nWhole app changes theme.\n","language":"txt","filename":"","files":"[{\"id\":\"yqyt87jt6\",\"name\":\"code\",\"code\":\"Change CSS variables.\\nWhole app changes theme.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"97088014-2ba4-4d85-9725-069d0429c755","type":"divider","props":{},"children":[]},{"id":"fa9fb216-aa99-4bdd-80d3-86e6a6248694","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Why Use CSS Variables for Dark Mode?","styles":{}}],"children":[]},{"id":"851b6365-7aa2-44ff-a0ba-dbc9880a700d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS variables are good for dark mode because you only change the values.","styles":{}}],"children":[]},{"id":"ee9f439f-a2c5-4a50-8c1e-90b70edd5483","type":"procode","props":{"code":"Same CSS property\n└── different variable value\n","language":"txt","filename":"","files":"[{\"id\":\"crf4udqm9\",\"name\":\"code\",\"code\":\"Same CSS property\\n└── different variable value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"afcab3cf-b9ac-49b1-b6a5-b3b304397913","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"e62f9876-6767-4686-98cb-a39378507eef","type":"procode","props":{"code":".card {\n background: var(--card-background);\n color: var(--card-foreground);\n border-color: var(--card-border);\n}\n","language":"css","filename":"","files":"[{\"id\":\"gpygxs6zm\",\"name\":\"code\",\"code\":\".card {\\n background: var(--card-background);\\n color: var(--card-foreground);\\n border-color: var(--card-border);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e64c1a50-811d-4678-a999-ce6d101b226d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Light values:","styles":{}}],"children":[]},{"id":"a960b5eb-d90c-420c-a2e0-81754d001be7","type":"procode","props":{"code":":root {\n --card-background: #ffffff;\n --card-foreground: #111827;\n --card-border: #e5e7eb;\n}\n","language":"css","filename":"","files":"[{\"id\":\"svb39rdqq\",\"name\":\"code\",\"code\":\":root {\\n --card-background: #ffffff;\\n --card-foreground: #111827;\\n --card-border: #e5e7eb;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"82bce0c1-9c9d-42ac-a097-a9b7d64993c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dark values:","styles":{}}],"children":[]},{"id":"9cf0c0ac-e70a-4404-a417-c326742c9bf5","type":"procode","props":{"code":"[data-theme=\"dark\"] {\n --card-background: #18181b;\n --card-foreground: #f9fafb;\n --card-border: #27272a;\n}\n","language":"css","filename":"","files":"[{\"id\":\"olybxxv1w\",\"name\":\"code\",\"code\":\"[data-theme=\\\"dark\\\"] {\\n --card-background: #18181b;\\n --card-foreground: #f9fafb;\\n --card-border: #27272a;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0a13bd8b-93e5-4fd6-95c3-4044a049eb4e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"be53d2f3-cf62-44ca-b7cc-7e712886f683","type":"procode","props":{"code":"Component style stays the same.\nTheme values change.\n","language":"txt","filename":"","files":"[{\"id\":\"gjvhx00v9\",\"name\":\"code\",\"code\":\"Component style stays the same.\\nTheme values change.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"daf0e8b1-9642-4188-834c-ee35d081e56f","type":"divider","props":{},"children":[]},{"id":"d41204a4-8f64-465c-b028-8819846912c3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic CSS Dark Mode","styles":{}}],"children":[]},{"id":"43527e81-8a79-4768-bb09-8037647019ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/styles/global.css","styles":{"code":true}}],"children":[]},{"id":"3160a2e6-91d2-4dd0-bb1a-180040a9b8f5","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111111;\n --card: #ffffff;\n --border: #e5e7eb;\n}\n\n[data-theme=\"dark\"] {\n --background: #09090b;\n --foreground: #fafafa;\n --card: #18181b;\n --border: #27272a;\n}\n\nbody {\n margin: 0;\n background: var(--background);\n color: var(--foreground);\n font-family: system-ui, sans-serif;\n}\n\n.card {\n border: 1px solid var(--border);\n border-radius: 16px;\n background: var(--card);\n padding: 24px;\n}\n","language":"css","filename":"","files":"[{\"id\":\"qejv26kvn\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111111;\\n --card: #ffffff;\\n --border: #e5e7eb;\\n}\\n\\n[data-theme=\\\"dark\\\"] {\\n --background: #09090b;\\n --foreground: #fafafa;\\n --card: #18181b;\\n --border: #27272a;\\n}\\n\\nbody {\\n margin: 0;\\n background: var(--background);\\n color: var(--foreground);\\n font-family: system-ui, sans-serif;\\n}\\n\\n.card {\\n border: 1px solid var(--border);\\n border-radius: 16px;\\n background: var(--card);\\n padding: 24px;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b9bd732b-3483-43d7-a15b-ffc59df595d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML:","styles":{}}],"children":[]},{"id":"b97c7e2d-e8df-43c3-96e8-21828fdbbd27","type":"procode","props":{"code":"\n \n

\n Dark mode card\n

\n \n\n","language":"html","filename":"","files":"[{\"id\":\"g7b3awcpa\",\"name\":\"code\",\"code\":\"\\n \\n

\\n Dark mode card\\n

\\n \\n\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a0279fc-73f9-4196-b4ea-b8ef8d2273fe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"111f943e-e145-464a-bf95-38cfe47cb080","type":"procode","props":{"code":"data-theme=\"dark\" activates dark variables.\n","language":"txt","filename":"","files":"[{\"id\":\"yqj5acpgg\",\"name\":\"code\",\"code\":\"data-theme=\\\"dark\\\" activates dark variables.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2739698d-7092-4433-934a-1294d6b15ca6","type":"divider","props":{},"children":[]},{"id":"af0e235f-6ef3-4ce1-a630-583413b8dd2f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with prefers-color-scheme","styles":{}}],"children":[]},{"id":"31d8a503-e881-4036-bdce-c6c284e5204d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can follow the user’s system theme automatically.","styles":{}}],"children":[]},{"id":"e4b83a84-753f-403a-a452-28cdf2bdf2ae","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111111;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #09090b;\n --foreground: #fafafa;\n }\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n}\n","language":"css","filename":"","files":"[{\"id\":\"ypq71njvl\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111111;\\n}\\n\\n@media (prefers-color-scheme: dark) {\\n :root {\\n --background: #09090b;\\n --foreground: #fafafa;\\n }\\n}\\n\\nbody {\\n background: var(--background);\\n color: var(--foreground);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"afed3378-b885-440a-b893-f8f5f73b31d9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4855b1d5-1a0c-4b4c-89a1-e70c9f09a51b","type":"procode","props":{"code":"If user system is dark\n└── browser applies dark mode CSS\n","language":"txt","filename":"","files":"[{\"id\":\"2o18zh0vx\",\"name\":\"code\",\"code\":\"If user system is dark\\n└── browser applies dark mode CSS\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bcad16c5-74ee-402e-855b-b4c080f728ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"MDN explains that ","styles":{}},{"type":"text","text":"prefers-color-scheme: dark","styles":{"code":true}},{"type":"text","text":" indicates the user has expressed a preference for a dark interface.","styles":{}}],"children":[]},{"id":"2a923a20-871f-4262-887c-8d37e6237bd3","type":"divider","props":{},"children":[]},{"id":"677fdf2f-93d8-4773-b372-5a0d0f92acc8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Manual Dark Mode with React State","styles":{}}],"children":[]},{"id":"10797219-97c2-4195-bcc3-b0237dc0d591","type":"procode","props":{"code":"import { useState } from \"react\"\nimport \"./styles.css\"\n\nexport default function App() {\n const [theme, setTheme] = useState<\"light\" | \"dark\">(\"light\")\n\n function toggleTheme() {\n setTheme((currentTheme) =>\n currentTheme === \"light\" ? \"dark\" : \"light\"\n )\n }\n\n return (\n

\n \n\n

Dark Mode

This card changes color based on theme.

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"hx0sk7w5c\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport \\\"./styles.css\\\"\\n\\nexport default function App() {\\n const [theme, setTheme] = useState<\\\"light\\\" | \\\"dark\\\">(\\\"light\\\")\\n\\n function toggleTheme() {\\n setTheme((currentTheme) =>\\n currentTheme === \\\"light\\\" ? \\\"dark\\\" : \\\"light\\\"\\n )\\n }\\n\\n return (\\n

\\n \\n\\n

\\n

Dark Mode

\\n

This card changes color based on theme.

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8ac846de-5f14-4e96-9881-cb208b6c53b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS:","styles":{}}],"children":[]},{"id":"0b7ea358-2c56-4604-a670-09075eeb187e","type":"procode","props":{"code":"main {\n min-height: 100vh;\n background: var(--background);\n color: var(--foreground);\n padding: 32px;\n}\n\nmain[data-theme=\"light\"] {\n --background: #ffffff;\n --foreground: #111111;\n --card: #ffffff;\n --border: #e5e7eb;\n}\n\nmain[data-theme=\"dark\"] {\n --background: #09090b;\n --foreground: #fafafa;\n --card: #18181b;\n --border: #27272a;\n}\n\n.card {\n margin-top: 24px;\n border: 1px solid var(--border);\n border-radius: 16px;\n background: var(--card);\n padding: 24px;\n}\n","language":"css","filename":"","files":"[{\"id\":\"buvee1b5f\",\"name\":\"code\",\"code\":\"main {\\n min-height: 100vh;\\n background: var(--background);\\n color: var(--foreground);\\n padding: 32px;\\n}\\n\\nmain[data-theme=\\\"light\\\"] {\\n --background: #ffffff;\\n --foreground: #111111;\\n --card: #ffffff;\\n --border: #e5e7eb;\\n}\\n\\nmain[data-theme=\\\"dark\\\"] {\\n --background: #09090b;\\n --foreground: #fafafa;\\n --card: #18181b;\\n --border: #27272a;\\n}\\n\\n.card {\\n margin-top: 24px;\\n border: 1px solid var(--border);\\n border-radius: 16px;\\n background: var(--card);\\n padding: 24px;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"70cd8e69-c249-44dd-bb6c-0ebf1390cc79","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"27763b5a-bd5d-4240-b011-f1599df0d281","type":"procode","props":{"code":"React state controls theme.\nCSS variables control colors.\n","language":"txt","filename":"","files":"[{\"id\":\"wkl1m7w1p\",\"name\":\"code\",\"code\":\"React state controls theme.\\nCSS variables control colors.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"633fd457-0da0-4bef-bd5a-8dec0cf765d7","type":"divider","props":{},"children":[]},{"id":"92cdd15d-e2f4-4f9c-a7a1-9fb865295d1d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with html data-theme","styles":{}}],"children":[]},{"id":"f0bff8c4-25ba-4ee5-b7a5-b26dc12f315b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A more professional approach is to put ","styles":{}},{"type":"text","text":"data-theme","styles":{"code":true}},{"type":"text","text":" on the ","styles":{}},{"type":"text","text":"html","styles":{"code":true}},{"type":"text","text":" element.","styles":{}}],"children":[]},{"id":"be423409-4b4d-4cba-afe4-8a9839ee1c1d","type":"procode","props":{"code":"document.documentElement.dataset.theme = \"dark\"\n","language":"tsx","filename":"","files":"[{\"id\":\"qe99y7e62\",\"name\":\"code\",\"code\":\"document.documentElement.dataset.theme = \\\"dark\\\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"79bf61fe-7497-4032-908b-199423ec663e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Result:","styles":{}}],"children":[]},{"id":"aee5b148-cf6b-43d2-aeff-be8a0e0dea5c","type":"procode","props":{"code":"\n","language":"html","filename":"","files":"[{\"id\":\"92roqb8jl\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"92f2a535-b800-4e62-b835-74a04f30a70b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS:","styles":{}}],"children":[]},{"id":"03f07b2a-04a2-46c9-8602-e51350247ca9","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111111;\n}\n\n[data-theme=\"dark\"] {\n --background: #09090b;\n --foreground: #fafafa;\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n}\n","language":"css","filename":"","files":"[{\"id\":\"y9mebyq8x\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111111;\\n}\\n\\n[data-theme=\\\"dark\\\"] {\\n --background: #09090b;\\n --foreground: #fafafa;\\n}\\n\\nbody {\\n background: var(--background);\\n color: var(--foreground);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7b4f46e2-b903-4291-91c2-aeb40f6ae81b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b4e3dcda-dfba-4428-b04a-e800f1b7d27d","type":"procode","props":{"code":"html data-theme affects the whole app.\n","language":"txt","filename":"","files":"[{\"id\":\"g3ou0oi6q\",\"name\":\"code\",\"code\":\"html data-theme affects the whole app.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2e2392d-cd69-4447-9acd-4963323347c7","type":"divider","props":{},"children":[]},{"id":"ab0dec9a-0300-456b-8b05-deb7798268da","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with localStorage","styles":{}}],"children":[]},{"id":"d64cff5d-ba4b-4d33-8064-41219e94cb9e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"localStorage","styles":{"code":true}},{"type":"text","text":" if you want the theme choice to stay after refresh.","styles":{}}],"children":[]},{"id":"a125a5cd-8a21-446e-8a63-5341b653d3f3","type":"procode","props":{"code":"localStorage.setItem(\"theme\", \"dark\")\n","language":"tsx","filename":"","files":"[{\"id\":\"pl8by2eeb\",\"name\":\"code\",\"code\":\"localStorage.setItem(\\\"theme\\\", \\\"dark\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9e0c464-cbfa-4eb6-bccf-48277ae435b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Read saved theme:","styles":{}}],"children":[]},{"id":"562738f2-84e4-4eef-9171-34cc9bdfd388","type":"procode","props":{"code":"const savedTheme = localStorage.getItem(\"theme\")\n","language":"tsx","filename":"","files":"[{\"id\":\"yoiycz6ys\",\"name\":\"code\",\"code\":\"const savedTheme = localStorage.getItem(\\\"theme\\\")\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d43b762-6bc2-4e66-aeae-e34d42e30993","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"38585210-b06c-4510-8f0c-0bd05ea1e1b5","type":"procode","props":{"code":"localStorage remembers the user's theme.\n","language":"txt","filename":"","files":"[{\"id\":\"o5cf2rkln\",\"name\":\"code\",\"code\":\"localStorage remembers the user's theme.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f46059c7-0420-4316-927f-3b31943ecd88","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"MDN explains that ","styles":{}},{"type":"text","text":"localStorage","styles":{"code":true}},{"type":"text","text":" stores data for a document’s origin and the data is saved across browser sessions.","styles":{}}],"children":[]},{"id":"58dc2c09-fae7-46f6-85c6-7cc4f73ab455","type":"divider","props":{},"children":[]},{"id":"a227ce3e-d289-4284-b6a4-1b64a666b2c4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Complete Dark Mode with localStorage","styles":{}}],"children":[]},{"id":"a2290e2c-d040-40f5-9b73-58aaf63f4a36","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/App.tsx","styles":{"code":true}}],"children":[]},{"id":"b608de7c-2445-4b27-bb4a-388492badde5","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\nimport \"./styles.css\"\n\ntype Theme = \"light\" | \"dark\"\n\nexport default function App() {\n const [theme, setTheme] = useState(() => {\n const savedTheme = localStorage.getItem(\"theme\")\n\n if (savedTheme === \"light\" || savedTheme === \"dark\") {\n return savedTheme\n }\n\n return \"light\"\n })\n\n useEffect(() => {\n document.documentElement.dataset.theme = theme\n localStorage.setItem(\"theme\", theme)\n }, [theme])\n\n function toggleTheme() {\n setTheme((currentTheme) =>\n currentTheme === \"light\" ? \"dark\" : \"light\"\n )\n }\n\n return (\n

\n \n\n

Dark Mode

The selected theme is saved after refresh.

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ri40357g7\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\nimport \\\"./styles.css\\\"\\n\\ntype Theme = \\\"light\\\" | \\\"dark\\\"\\n\\nexport default function App() {\\n const [theme, setTheme] = useState(() => {\\n const savedTheme = localStorage.getItem(\\\"theme\\\")\\n\\n if (savedTheme === \\\"light\\\" || savedTheme === \\\"dark\\\") {\\n return savedTheme\\n }\\n\\n return \\\"light\\\"\\n })\\n\\n useEffect(() => {\\n document.documentElement.dataset.theme = theme\\n localStorage.setItem(\\\"theme\\\", theme)\\n }, [theme])\\n\\n function toggleTheme() {\\n setTheme((currentTheme) =>\\n currentTheme === \\\"light\\\" ? \\\"dark\\\" : \\\"light\\\"\\n )\\n }\\n\\n return (\\n

\\n \\n\\n

\\n

Dark Mode

\\n

The selected theme is saved after refresh.

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0b6b7a94-b814-4198-87a6-e3693b946aa8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/styles.css","styles":{"code":true}}],"children":[]},{"id":"8967bdbe-e540-4193-ac3b-7dd0f2cc7547","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111111;\n --card: #ffffff;\n --border: #e5e7eb;\n --button: #111111;\n --button-text: #ffffff;\n}\n\n[data-theme=\"dark\"] {\n --background: #09090b;\n --foreground: #fafafa;\n --card: #18181b;\n --border: #27272a;\n --button: #fafafa;\n --button-text: #111111;\n}\n\nbody {\n margin: 0;\n background: var(--background);\n color: var(--foreground);\n font-family: system-ui, sans-serif;\n}\n\n.page {\n min-height: 100vh;\n padding: 32px;\n}\n\n.card {\n margin-top: 24px;\n max-width: 480px;\n border: 1px solid var(--border);\n border-radius: 16px;\n background: var(--card);\n padding: 24px;\n}\n\nbutton {\n border: none;\n border-radius: 999px;\n background: var(--button);\n color: var(--button-text);\n padding: 12px 20px;\n font-weight: 600;\n cursor: pointer;\n}\n","language":"css","filename":"","files":"[{\"id\":\"ihj44uxgt\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111111;\\n --card: #ffffff;\\n --border: #e5e7eb;\\n --button: #111111;\\n --button-text: #ffffff;\\n}\\n\\n[data-theme=\\\"dark\\\"] {\\n --background: #09090b;\\n --foreground: #fafafa;\\n --card: #18181b;\\n --border: #27272a;\\n --button: #fafafa;\\n --button-text: #111111;\\n}\\n\\nbody {\\n margin: 0;\\n background: var(--background);\\n color: var(--foreground);\\n font-family: system-ui, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n padding: 32px;\\n}\\n\\n.card {\\n margin-top: 24px;\\n max-width: 480px;\\n border: 1px solid var(--border);\\n border-radius: 16px;\\n background: var(--card);\\n padding: 24px;\\n}\\n\\nbutton {\\n border: none;\\n border-radius: 999px;\\n background: var(--button);\\n color: var(--button-text);\\n padding: 12px 20px;\\n font-weight: 600;\\n cursor: pointer;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ac1127e9-39e4-41db-b51c-ed78a8661062","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"348618da-8a27-471b-b592-80eb8a6ab638","type":"procode","props":{"code":"App loads\n├── read theme from localStorage\n├── set data-theme on html\n├── user toggles theme\n├── update React state\n├── update html data-theme\n└── save theme to localStorage\n","language":"txt","filename":"","files":"[{\"id\":\"4n5k23p7h\",\"name\":\"code\",\"code\":\"App loads\\n├── read theme from localStorage\\n├── set data-theme on html\\n├── user toggles theme\\n├── update React state\\n├── update html data-theme\\n└── save theme to localStorage\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"959da596-a303-475a-8762-7badc21f2352","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React Effects are used to synchronize a component with external systems, such as browser APIs, which fits this pattern of syncing theme state to ","styles":{}},{"type":"text","text":"document","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"localStorage","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"263b46d2-85d3-4df9-a8bb-7eda2d669b2b","type":"divider","props":{},"children":[]},{"id":"fcd1a7eb-c8c0-40be-81c9-b71add15ec50","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with System Preference","styles":{}}],"children":[]},{"id":"4c402583-ebc1-4850-b56e-6050b4ba4cb0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can read the system theme with ","styles":{}},{"type":"text","text":"matchMedia","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"e34c6975-65ce-412b-b217-db534c42d04d","type":"procode","props":{"code":"function getSystemTheme(): \"light\" | \"dark\" {\n const prefersDark = window.matchMedia(\n \"(prefers-color-scheme: dark)\"\n ).matches\n\n return prefersDark ? \"dark\" : \"light\"\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"j25s5bfrv\",\"name\":\"code\",\"code\":\"function getSystemTheme(): \\\"light\\\" | \\\"dark\\\" {\\n const prefersDark = window.matchMedia(\\n \\\"(prefers-color-scheme: dark)\\\"\\n ).matches\\n\\n return prefersDark ? \\\"dark\\\" : \\\"light\\\"\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb52175c-99f5-43b8-871a-d7b1bd860d98","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"81e9f538-bb69-4128-857b-a73b4e7ce17d","type":"procode","props":{"code":"const [theme, setTheme] = useState<\"light\" | \"dark\">(() => {\n const savedTheme = localStorage.getItem(\"theme\")\n\n if (savedTheme === \"light\" || savedTheme === \"dark\") {\n return savedTheme\n }\n\n return getSystemTheme()\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"m91a8ntv2\",\"name\":\"code\",\"code\":\"const [theme, setTheme] = useState<\\\"light\\\" | \\\"dark\\\">(() => {\\n const savedTheme = localStorage.getItem(\\\"theme\\\")\\n\\n if (savedTheme === \\\"light\\\" || savedTheme === \\\"dark\\\") {\\n return savedTheme\\n }\\n\\n return getSystemTheme()\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4049b137-c974-443c-b185-ab2680e296a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e55dae9f-b8b5-458c-8911-a8f00b28a3c7","type":"procode","props":{"code":"If user has saved theme\n└── use saved theme\n\nIf not\n└── use system theme\n","language":"txt","filename":"","files":"[{\"id\":\"8gjb2jjji\",\"name\":\"code\",\"code\":\"If user has saved theme\\n└── use saved theme\\n\\nIf not\\n└── use system theme\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b38f1c62-0ef7-4645-b77b-08336412af37","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"MDN shows that ","styles":{}},{"type":"text","text":"prefers-color-scheme","styles":{"code":true}},{"type":"text","text":" is based on the user’s operating system or user agent preference.","styles":{}}],"children":[]},{"id":"620c0960-2ec6-49ab-b891-0320b442885b","type":"divider","props":{},"children":[]},{"id":"10629e27-350b-491a-9891-37d3880f5339","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with Context","styles":{}}],"children":[]},{"id":"341cebb6-9ada-42cf-a1ec-c10c84a81b15","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For larger apps, use Context.","styles":{}}],"children":[]},{"id":"d9716bdc-703a-44e2-a521-7381b20616f3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/contexts/theme-context.tsx","styles":{"code":true}}],"children":[]},{"id":"52b9cec5-7257-4253-be48-976511c946c7","type":"procode","props":{"code":"import {\n createContext,\n useContext,\n useEffect,\n useState,\n} from \"react\"\n\ntype Theme = \"light\" | \"dark\"\n\ntype ThemeContextValue = {\n theme: Theme\n toggleTheme: () => void\n setTheme: React.Dispatch>\n}\n\nconst ThemeContext = createContext(null)\n\nexport function ThemeProvider({\n children,\n}: {\n children: React.ReactNode\n}) {\n const [theme, setTheme] = useState(() => {\n const savedTheme = localStorage.getItem(\"theme\")\n\n if (savedTheme === \"light\" || savedTheme === \"dark\") {\n return savedTheme\n }\n\n return \"light\"\n })\n\n useEffect(() => {\n document.documentElement.dataset.theme = theme\n localStorage.setItem(\"theme\", theme)\n }, [theme])\n\n function toggleTheme() {\n setTheme((currentTheme) =>\n currentTheme === \"light\" ? \"dark\" : \"light\"\n )\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext)\n\n if (!context) {\n throw new Error(\"useTheme must be used inside ThemeProvider\")\n }\n\n return context\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"tuqvtz7c6\",\"name\":\"code\",\"code\":\"import {\\n createContext,\\n useContext,\\n useEffect,\\n useState,\\n} from \\\"react\\\"\\n\\ntype Theme = \\\"light\\\" | \\\"dark\\\"\\n\\ntype ThemeContextValue = {\\n theme: Theme\\n toggleTheme: () => void\\n setTheme: React.Dispatch>\\n}\\n\\nconst ThemeContext = createContext(null)\\n\\nexport function ThemeProvider({\\n children,\\n}: {\\n children: React.ReactNode\\n}) {\\n const [theme, setTheme] = useState(() => {\\n const savedTheme = localStorage.getItem(\\\"theme\\\")\\n\\n if (savedTheme === \\\"light\\\" || savedTheme === \\\"dark\\\") {\\n return savedTheme\\n }\\n\\n return \\\"light\\\"\\n })\\n\\n useEffect(() => {\\n document.documentElement.dataset.theme = theme\\n localStorage.setItem(\\\"theme\\\", theme)\\n }, [theme])\\n\\n function toggleTheme() {\\n setTheme((currentTheme) =>\\n currentTheme === \\\"light\\\" ? \\\"dark\\\" : \\\"light\\\"\\n )\\n }\\n\\n return (\\n \\n {children}\\n \\n )\\n}\\n\\nexport function useTheme() {\\n const context = useContext(ThemeContext)\\n\\n if (!context) {\\n throw new Error(\\\"useTheme must be used inside ThemeProvider\\\")\\n }\\n\\n return context\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2c161285-7434-47b0-8ca1-01f6620e87a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"794d2ef4-9517-4a14-824e-4cceebcc67e0","type":"procode","props":{"code":"import { ThemeProvider, useTheme } from \"./contexts/theme-context\"\n\nexport default function App() {\n return (\n \n \n \n )\n}\n\nfunction ThemeButton() {\n const { theme, toggleTheme } = useTheme()\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"1mj3uhejc\",\"name\":\"code\",\"code\":\"import { ThemeProvider, useTheme } from \\\"./contexts/theme-context\\\"\\n\\nexport default function App() {\\n return (\\n \\n \\n \\n )\\n}\\n\\nfunction ThemeButton() {\\n const { theme, toggleTheme } = useTheme()\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"679c3dbd-09a7-492a-9018-eb608dc9124e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f99ab686-ec48-4f58-a1c8-a6607b04178d","type":"procode","props":{"code":"ThemeProvider stores theme.\nuseTheme reads and changes theme.\n","language":"txt","filename":"","files":"[{\"id\":\"ykvjm71w7\",\"name\":\"code\",\"code\":\"ThemeProvider stores theme.\\nuseTheme reads and changes theme.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6a28c6c-190b-4669-aa86-61dfbb0fcf2d","type":"divider","props":{},"children":[]},{"id":"3326a8c3-90cb-4e82-bec1-800fe76ec7e8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with Zustand","styles":{}}],"children":[]},{"id":"6148e248-2e40-428a-9e0e-d93ba68d385e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If your app already uses Zustand, theme can be stored there.","styles":{}}],"children":[]},{"id":"70148b31-b7e4-4a8b-8c08-e7208fda2258","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/stores/use-theme-store.ts","styles":{"code":true}}],"children":[]},{"id":"8d300477-6e25-4a52-a1f3-eae5e819f84e","type":"procode","props":{"code":"import { create } from \"zustand\"\nimport { persist } from \"zustand/middleware\"\n\ntype Theme = \"light\" | \"dark\"\n\ntype ThemeStore = {\n theme: Theme\n setTheme: (theme: Theme) => void\n toggleTheme: () => void\n}\n\nexport const useThemeStore = create()(\n persist(\n (set) => ({\n theme: \"light\",\n\n setTheme: (theme) =>\n set({\n theme,\n }),\n\n toggleTheme: () =>\n set((state) => ({\n theme: state.theme === \"light\" ? \"dark\" : \"light\",\n })),\n }),\n {\n name: \"theme-storage\",\n }\n )\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"lses15vy6\",\"name\":\"code\",\"code\":\"import { create } from \\\"zustand\\\"\\nimport { persist } from \\\"zustand/middleware\\\"\\n\\ntype Theme = \\\"light\\\" | \\\"dark\\\"\\n\\ntype ThemeStore = {\\n theme: Theme\\n setTheme: (theme: Theme) => void\\n toggleTheme: () => void\\n}\\n\\nexport const useThemeStore = create()(\\n persist(\\n (set) => ({\\n theme: \\\"light\\\",\\n\\n setTheme: (theme) =>\\n set({\\n theme,\\n }),\\n\\n toggleTheme: () =>\\n set((state) => ({\\n theme: state.theme === \\\"light\\\" ? \\\"dark\\\" : \\\"light\\\",\\n })),\\n }),\\n {\\n name: \\\"theme-storage\\\",\\n }\\n )\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"277c264e-a3a0-4d47-a5ec-8cffb2d7c6db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"f65701c9-dcc8-42a2-9da3-fc138370bd47","type":"procode","props":{"code":"import { useEffect } from \"react\"\nimport { useThemeStore } from \"./stores/use-theme-store\"\n\nexport function ThemeSync() {\n const theme = useThemeStore((state) => state.theme)\n\n useEffect(() => {\n document.documentElement.dataset.theme = theme\n }, [theme])\n\n return null\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ljbspayvq\",\"name\":\"code\",\"code\":\"import { useEffect } from \\\"react\\\"\\nimport { useThemeStore } from \\\"./stores/use-theme-store\\\"\\n\\nexport function ThemeSync() {\\n const theme = useThemeStore((state) => state.theme)\\n\\n useEffect(() => {\\n document.documentElement.dataset.theme = theme\\n }, [theme])\\n\\n return null\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d0e73452-2574-44ea-992d-6a75fbe02074","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button:","styles":{}}],"children":[]},{"id":"60f74500-2146-4cd8-95d3-1e8aa3875427","type":"procode","props":{"code":"import { useThemeStore } from \"./stores/use-theme-store\"\n\nexport function ThemeButton() {\n const theme = useThemeStore((state) => state.theme)\n const toggleTheme = useThemeStore((state) => state.toggleTheme)\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"cjgros35r\",\"name\":\"code\",\"code\":\"import { useThemeStore } from \\\"./stores/use-theme-store\\\"\\n\\nexport function ThemeButton() {\\n const theme = useThemeStore((state) => state.theme)\\n const toggleTheme = useThemeStore((state) => state.toggleTheme)\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1ad32f63-023f-47b2-9ea7-85406e9ce5e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"18812d66-4b58-419d-ac69-c2574dff0312","type":"procode","props":{"code":"Zustand stores theme globally.\npersist saves it after refresh.\n","language":"txt","filename":"","files":"[{\"id\":\"th6lz3sna\",\"name\":\"code\",\"code\":\"Zustand stores theme globally.\\npersist saves it after refresh.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5ed018a-54ec-4f87-90fa-7eaaf30d3fbd","type":"divider","props":{},"children":[]},{"id":"785656a5-9635-423a-a2f6-fe8ac1f71e5e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with Tailwind CSS","styles":{}}],"children":[]},{"id":"005223ea-9f59-44c2-9af0-df279ff0b3f2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tailwind has a ","styles":{}},{"type":"text","text":"dark","styles":{"code":true}},{"type":"text","text":" variant.","styles":{}}],"children":[]},{"id":"5ea9463a-0295-4ef8-b5ec-0783189f94d8","type":"procode","props":{"code":"export function Card() {\n return (\n

Dark Mode Card

\n This card changes with dark mode.\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"gsyzi8tvw\",\"name\":\"code\",\"code\":\"export function Card() {\\n return (\\n

\\n

Dark Mode Card

\\n

\\n This card changes with dark mode.\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e8f54a46-51f4-4630-a20c-5d589d25af9d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"480702a3-c240-4ab9-befb-0e29cea1ddfc","type":"procode","props":{"code":"normal class = light style\ndark: class = dark style\n","language":"txt","filename":"","files":"[{\"id\":\"qs74sfops\",\"name\":\"code\",\"code\":\"normal class = light style\\ndark: class = dark style\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a1af6fcb-ec31-49ff-9a68-71abc56a7985","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tailwind’s dark mode docs show using the ","styles":{}},{"type":"text","text":"dark","styles":{"code":true}},{"type":"text","text":" variant, and also show how to override it with a custom selector using ","styles":{}},{"type":"text","text":"@custom-variant","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"386617fe-fc09-47c0-9d0d-48b35b6dd81a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Your previous Tailwind note also explains that Tailwind supports dark mode styling and can use a ","styles":{}},{"type":"text","text":"data-theme","styles":{"code":true}},{"type":"text","text":" selector for manual dark mode.","styles":{}}],"children":[]},{"id":"a184a538-bead-4a65-8737-18cb7276fef1","type":"divider","props":{},"children":[]},{"id":"9b9ff44a-eade-43fa-bea2-50cff1416672","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Tailwind Dark Mode with data-theme","styles":{}}],"children":[]},{"id":"000fad06-91be-44c6-9e3b-080fe7ff1b07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/index.css","styles":{"code":true}}],"children":[]},{"id":"539e083b-f9dc-4e90-96a2-0501972d3a61","type":"procode","props":{"code":"@import \"tailwindcss\";\n\n@custom-variant dark (&:where([data-theme=\"dark\"], [data-theme=\"dark\"] *));\n","language":"css","filename":"","files":"[{\"id\":\"3x5h25924\",\"name\":\"code\",\"code\":\"@import \\\"tailwindcss\\\";\\n\\n@custom-variant dark (&:where([data-theme=\\\"dark\\\"], [data-theme=\\\"dark\\\"] *));\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c6445412-581b-4522-957c-3178071df97f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then use:","styles":{}}],"children":[]},{"id":"7a105754-4268-43a9-a98f-9fec54cf66a2","type":"procode","props":{"code":"\n","language":"html","filename":"","files":"[{\"id\":\"jno7yplll\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1da250b-8d2b-4df5-963c-e643716019a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Component:","styles":{}}],"children":[]},{"id":"89385788-7a8e-4080-8973-128917a4a070","type":"procode","props":{"code":"export function ThemeCard() {\n return (\n

\n Dark mode with data-theme\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"arf0jmhnh\",\"name\":\"code\",\"code\":\"export function ThemeCard() {\\n return (\\n

\\n Dark mode with data-theme\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d10525e-cd3b-45b3-b20a-b7d8bdf53ac7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"95205dfe-6d9e-4e9c-86c0-df5619445d47","type":"procode","props":{"code":"data-theme=\"dark\"\n└── activates Tailwind dark: classes\n","language":"txt","filename":"","files":"[{\"id\":\"kkcyc98pe\",\"name\":\"code\",\"code\":\"data-theme=\\\"dark\\\"\\n└── activates Tailwind dark: classes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f84cfc9-f710-43c1-9d3a-3352fd6aa60d","type":"divider","props":{},"children":[]},{"id":"aca7bb7d-aedc-4a20-b902-ed061f07d19f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode with CSS Modules","styles":{}}],"children":[]},{"id":"e4300e6f-8238-441a-b25a-501bd43e0f2e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Card.module.css","styles":{"code":true}}],"children":[]},{"id":"6956f4d6-b27a-4e4b-b43b-46a4fa7b5975","type":"procode","props":{"code":".card {\n border: 1px solid var(--border);\n border-radius: 16px;\n background: var(--card);\n color: var(--foreground);\n padding: 24px;\n}\n\n.title {\n margin: 0;\n font-size: 24px;\n font-weight: 700;\n}\n\n.description {\n color: var(--muted);\n line-height: 1.7;\n}\n","language":"css","filename":"","files":"[{\"id\":\"j6ma8tf34\",\"name\":\"code\",\"code\":\".card {\\n border: 1px solid var(--border);\\n border-radius: 16px;\\n background: var(--card);\\n color: var(--foreground);\\n padding: 24px;\\n}\\n\\n.title {\\n margin: 0;\\n font-size: 24px;\\n font-weight: 700;\\n}\\n\\n.description {\\n color: var(--muted);\\n line-height: 1.7;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1162082b-0bfb-4524-adda-c9b7212a978b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Card.tsx","styles":{"code":true}}],"children":[]},{"id":"43dde023-9894-4d06-9ce5-b0df1857b075","type":"procode","props":{"code":"import styles from \"./Card.module.css\"\n\nexport function Card() {\n return (\n

\n CSS Modules Dark Mode\n

\n\n

\n The class is scoped, but the variables come from the theme.\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"prt5uuupv\",\"name\":\"code\",\"code\":\"import styles from \\\"./Card.module.css\\\"\\n\\nexport function Card() {\\n return (\\n

\\n

\\n CSS Modules Dark Mode\\n

\\n\\n

\\n The class is scoped, but the variables come from the theme.\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"070b97d6-d9a4-4680-a181-183aab036f60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Global CSS:","styles":{}}],"children":[]},{"id":"405a1736-4a3a-42e2-9bf4-eeb22fabc477","type":"procode","props":{"code":":root {\n --foreground: #111827;\n --muted: #6b7280;\n --card: #ffffff;\n --border: #e5e7eb;\n}\n\n[data-theme=\"dark\"] {\n --foreground: #f9fafb;\n --muted: #a1a1aa;\n --card: #18181b;\n --border: #27272a;\n}\n","language":"css","filename":"","files":"[{\"id\":\"b46scbd0p\",\"name\":\"code\",\"code\":\":root {\\n --foreground: #111827;\\n --muted: #6b7280;\\n --card: #ffffff;\\n --border: #e5e7eb;\\n}\\n\\n[data-theme=\\\"dark\\\"] {\\n --foreground: #f9fafb;\\n --muted: #a1a1aa;\\n --card: #18181b;\\n --border: #27272a;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1c31e30-6496-4d87-b920-bd16e5b4ef78","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d4610e98-75a7-4dff-9f34-ac98c6e4fa69","type":"procode","props":{"code":"CSS Modules handle component classes.\nCSS variables handle theme colors.\n","language":"txt","filename":"","files":"[{\"id\":\"sbeg4krtn\",\"name\":\"code\",\"code\":\"CSS Modules handle component classes.\\nCSS variables handle theme colors.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d3ae8ae-e260-4675-be1a-5393b21baf19","type":"divider","props":{},"children":[]},{"id":"50498593-9a89-45a9-a69c-d78cb4ce29df","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode Button Component","styles":{}}],"children":[]},{"id":"ac721f77-49a4-4899-b127-260b76aa6426","type":"procode","props":{"code":"type ThemeButtonProps = {\n theme: \"light\" | \"dark\"\n onToggle: () => void\n}\n\nexport function ThemeButton({\n theme,\n onToggle,\n}: ThemeButtonProps) {\n return (\n \n {theme === \"light\" ? \"🌙 Dark\" : \"☀️ Light\"}\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"xvh61fd5g\",\"name\":\"code\",\"code\":\"type ThemeButtonProps = {\\n theme: \\\"light\\\" | \\\"dark\\\"\\n onToggle: () => void\\n}\\n\\nexport function ThemeButton({\\n theme,\\n onToggle,\\n}: ThemeButtonProps) {\\n return (\\n \\n {theme === \\\"light\\\" ? \\\"🌙 Dark\\\" : \\\"☀️ Light\\\"}\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ff83e713-6ce2-429e-8f86-3351b2808010","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"cc7100a5-a32e-42f1-ae1c-3c528351c8c4","type":"procode","props":{"code":"Button text should explain the next action.\n","language":"txt","filename":"","files":"[{\"id\":\"jwqr053li\",\"name\":\"code\",\"code\":\"Button text should explain the next action.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"076748fe-d5d8-4f2f-9288-354a1c01f711","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If current theme is light:","styles":{}}],"children":[]},{"id":"1f9b8e49-efe3-4738-991f-f310decbba9f","type":"procode","props":{"code":"show \"Dark\"\n","language":"txt","filename":"","files":"[{\"id\":\"tpz3y5gin\",\"name\":\"code\",\"code\":\"show \\\"Dark\\\"\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6b70e316-32d4-4285-8dda-8cf2970fe3ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If current theme is dark:","styles":{}}],"children":[]},{"id":"aef36533-d3ea-401e-81c6-9d0803655cc9","type":"procode","props":{"code":"show \"Light\"\n","language":"txt","filename":"","files":"[{\"id\":\"9vpy5z62j\",\"name\":\"code\",\"code\":\"show \\\"Light\\\"\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"15fe8860-1d36-4a14-89ea-074119575288","type":"divider","props":{},"children":[]},{"id":"48421fcd-5c2c-44a2-a67a-952be77c0b4d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode Color Tokens","styles":{}}],"children":[]},{"id":"645ef36c-fd13-46db-a7a7-f2e1348bd2b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use semantic color names.","styles":{}}],"children":[]},{"id":"3dbdbe91-5774-4942-a3a9-46ac588e9a07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"d1961edc-7f37-4c59-9d34-69af6092c64a","type":"procode","props":{"code":"--white: #ffffff;\n--black: #000000;\n","language":"css","filename":"","files":"[{\"id\":\"dsvbp86ai\",\"name\":\"code\",\"code\":\"--white: #ffffff;\\n--black: #000000;\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d6f6fc5f-e62f-4a47-8cb0-63634c4c1d23","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"1d8d0ee2-bdd5-403e-ba1b-9416ed711720","type":"procode","props":{"code":"--background: #ffffff;\n--foreground: #111111;\n--card: #ffffff;\n--muted: #6b7280;\n--border: #e5e7eb;\n","language":"css","filename":"","files":"[{\"id\":\"d8tdbr85h\",\"name\":\"code\",\"code\":\"--background: #ffffff;\\n--foreground: #111111;\\n--card: #ffffff;\\n--muted: #6b7280;\\n--border: #e5e7eb;\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7c5d6c3b-54b4-4107-8d89-fc60f3a4d3c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why better?","styles":{}}],"children":[]},{"id":"a71c7f70-f940-400c-94bf-652755f28f46","type":"procode","props":{"code":"background can be white in light mode\nbackground can be dark in dark mode\n","language":"txt","filename":"","files":"[{\"id\":\"p102my2fd\",\"name\":\"code\",\"code\":\"background can be white in light mode\\nbackground can be dark in dark mode\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c3ffe1fa-92d8-48bb-9646-86f668059878","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b24bd942-1169-4e7c-a66a-77adccb91599","type":"procode","props":{"code":"Name colors by purpose, not by color value.\n","language":"txt","filename":"","files":"[{\"id\":\"oqvkaq0pj\",\"name\":\"code\",\"code\":\"Name colors by purpose, not by color value.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c828544-8d23-4db9-99c0-cc5cfa8b63a7","type":"divider","props":{},"children":[]},{"id":"d8711e06-e90e-47f6-8061-fd59e270fd5f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Good Dark Mode Variables","styles":{}}],"children":[]},{"id":"cfadab62-84c4-4a3d-8eb8-4920a915f14a","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111827;\n --muted: #6b7280;\n --card: #ffffff;\n --card-foreground: #111827;\n --border: #e5e7eb;\n --input: #ffffff;\n --primary: #111827;\n --primary-foreground: #ffffff;\n}\n\n[data-theme=\"dark\"] {\n --background: #09090b;\n --foreground: #fafafa;\n --muted: #a1a1aa;\n --card: #18181b;\n --card-foreground: #fafafa;\n --border: #27272a;\n --input: #18181b;\n --primary: #fafafa;\n --primary-foreground: #09090b;\n}\n","language":"css","filename":"","files":"[{\"id\":\"v1ezxohdo\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111827;\\n --muted: #6b7280;\\n --card: #ffffff;\\n --card-foreground: #111827;\\n --border: #e5e7eb;\\n --input: #ffffff;\\n --primary: #111827;\\n --primary-foreground: #ffffff;\\n}\\n\\n[data-theme=\\\"dark\\\"] {\\n --background: #09090b;\\n --foreground: #fafafa;\\n --muted: #a1a1aa;\\n --card: #18181b;\\n --card-foreground: #fafafa;\\n --border: #27272a;\\n --input: #18181b;\\n --primary: #fafafa;\\n --primary-foreground: #09090b;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"38d57119-9ab1-4607-a676-da5371368091","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"96e96d86-06c3-43a0-a4f9-f8abf034f195","type":"procode","props":{"code":"Use the same variable names in both themes.\nOnly change the values.\n","language":"txt","filename":"","files":"[{\"id\":\"9lwlm2a5b\",\"name\":\"code\",\"code\":\"Use the same variable names in both themes.\\nOnly change the values.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"92a5d5c0-f923-4e71-b93d-ce17f0ab0cfc","type":"divider","props":{},"children":[]},{"id":"e433c3e1-a3b1-4558-974a-03552153d890","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Pure Black Everywhere","styles":{}}],"children":[]},{"id":"63af943b-5920-4ed2-83b5-03270ffa9fcf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"a7980d3f-fe31-42ba-b60a-200aaae1b9cc","type":"procode","props":{"code":"[data-theme=\"dark\"] {\n --background: #000000;\n --card: #000000;\n --border: #000000;\n}\n","language":"css","filename":"","files":"[{\"id\":\"9d64opqx5\",\"name\":\"code\",\"code\":\"[data-theme=\\\"dark\\\"] {\\n --background: #000000;\\n --card: #000000;\\n --border: #000000;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13db9121-1f7e-4a0a-9ef5-e17521001a4b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"820d035f-fd4d-47f1-8067-a0bfef943ddc","type":"procode","props":{"code":"No depth\nNo separation\nCards blend into background\nBorders disappear\n","language":"txt","filename":"","files":"[{\"id\":\"51wns0sl3\",\"name\":\"code\",\"code\":\"No depth\\nNo separation\\nCards blend into background\\nBorders disappear\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3cce5a3e-b08e-4487-8113-218de86192c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"38703a7c-20d7-429d-b04f-2dd99720d477","type":"procode","props":{"code":"[data-theme=\"dark\"] {\n --background: #09090b;\n --card: #18181b;\n --border: #27272a;\n}\n","language":"css","filename":"","files":"[{\"id\":\"0wi7c2kna\",\"name\":\"code\",\"code\":\"[data-theme=\\\"dark\\\"] {\\n --background: #09090b;\\n --card: #18181b;\\n --border: #27272a;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c771db49-bdf3-4d66-b46a-c27f92fbd975","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"05a28a12-b70f-4241-9385-79b3ed9a876a","type":"procode","props":{"code":"Dark mode needs layers, not only black.\n","language":"txt","filename":"","files":"[{\"id\":\"sd8nl1n8m\",\"name\":\"code\",\"code\":\"Dark mode needs layers, not only black.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"76afec53-a7e3-4bd3-a767-7d8a68eec340","type":"divider","props":{},"children":[]},{"id":"a1ae58f7-430a-4ab9-9105-88636207ed43","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode for Forms","styles":{}}],"children":[]},{"id":"3fb62996-8600-4372-836d-4ef6e1fe2504","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS:","styles":{}}],"children":[]},{"id":"8ca414e1-dcdb-4b76-96d9-4c71f5957f59","type":"procode","props":{"code":".input {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: 10px;\n background: var(--input);\n color: var(--foreground);\n padding: 10px 12px;\n outline: none;\n}\n\n.input::placeholder {\n color: var(--muted);\n}\n\n.input:focus {\n border-color: var(--foreground);\n}\n","language":"css","filename":"","files":"[{\"id\":\"p1mewyhif\",\"name\":\"code\",\"code\":\".input {\\n width: 100%;\\n border: 1px solid var(--border);\\n border-radius: 10px;\\n background: var(--input);\\n color: var(--foreground);\\n padding: 10px 12px;\\n outline: none;\\n}\\n\\n.input::placeholder {\\n color: var(--muted);\\n}\\n\\n.input:focus {\\n border-color: var(--foreground);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4c1ebfe2-3eab-4a7a-8e0f-d7c222549821","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Component:","styles":{}}],"children":[]},{"id":"cf1a2dc1-df91-4f0f-8edb-55079f9f2511","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"87cacisat\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4b548c5-4b61-4347-b2ef-cc0ecbb213a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8c171ebb-8022-4535-884c-dd80613f37ff","type":"procode","props":{"code":"Input background, text, border, and placeholder all need dark mode colors.\n","language":"txt","filename":"","files":"[{\"id\":\"895s49h4r\",\"name\":\"code\",\"code\":\"Input background, text, border, and placeholder all need dark mode colors.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"37b6ffc6-caa3-4b5d-8dff-d03d5db524d4","type":"divider","props":{},"children":[]},{"id":"e0dcf69e-2a05-4f2a-a69a-655414a42a96","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode for Cards","styles":{}}],"children":[]},{"id":"ed7e5128-e242-4586-937f-1766cdf4d6d9","type":"procode","props":{"code":".card {\n border: 1px solid var(--border);\n border-radius: 16px;\n background: var(--card);\n color: var(--card-foreground);\n padding: 24px;\n}\n\n.cardDescription {\n color: var(--muted);\n}\n","language":"css","filename":"","files":"[{\"id\":\"muk2x4fte\",\"name\":\"code\",\"code\":\".card {\\n border: 1px solid var(--border);\\n border-radius: 16px;\\n background: var(--card);\\n color: var(--card-foreground);\\n padding: 24px;\\n}\\n\\n.cardDescription {\\n color: var(--muted);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb9b6724-ba50-4408-af01-6637c6e8cd17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"09950580-cad7-4568-a5ed-2d8d275b4d62","type":"procode","props":{"code":"Card should be slightly different from page background.\n","language":"txt","filename":"","files":"[{\"id\":\"xc020c0ue\",\"name\":\"code\",\"code\":\"Card should be slightly different from page background.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a8d9913c-9b11-438e-bf71-92449dececa8","type":"divider","props":{},"children":[]},{"id":"94221995-0dc3-4f1b-98dc-fa46be2946d5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode for Borders","styles":{}}],"children":[]},{"id":"52775470-620b-4e42-a2b2-8fd97bdb78db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Light mode:","styles":{}}],"children":[]},{"id":"54d75093-37f6-497b-91f6-9cc4a487d661","type":"procode","props":{"code":"--border: #e5e7eb;\n","language":"css","filename":"","files":"[{\"id\":\"1166uclhr\",\"name\":\"code\",\"code\":\"--border: #e5e7eb;\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d196f69-c49f-4b18-ac01-7bb6720786a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dark mode:","styles":{}}],"children":[]},{"id":"0ae7bc61-5b14-4b75-8b99-e4dd5b1a8b27","type":"procode","props":{"code":"--border: #27272a;\n","language":"css","filename":"","files":"[{\"id\":\"zmfmjps0h\",\"name\":\"code\",\"code\":\"--border: #27272a;\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8b9f0166-087b-436c-8bf6-6beac046cee4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"924647b3-6bcc-4bc6-8209-d7f374190ebe","type":"procode","props":{"code":"Dark borders should be visible but not too bright.\n","language":"txt","filename":"","files":"[{\"id\":\"1y3lfrlru\",\"name\":\"code\",\"code\":\"Dark borders should be visible but not too bright.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a8490b68-b90b-44c1-b8a5-bae7a5c5cd34","type":"divider","props":{},"children":[]},{"id":"c0500427-ba4e-4f25-af49-8b0c5aa9d043","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode for Images","styles":{}}],"children":[]},{"id":"d35f26a0-e378-4907-930c-dc86cb01e81d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sometimes images look too bright in dark mode.","styles":{}}],"children":[]},{"id":"c1dd9008-180e-47b5-84c6-ec34b7deb392","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Option 1: keep image normal.","styles":{}}],"children":[]},{"id":"6da73324-3786-4cea-b921-3fe7ed6b2f97","type":"procode","props":{"code":".image {\n border-radius: 16px;\n}\n","language":"css","filename":"","files":"[{\"id\":\"8z8pfjorj\",\"name\":\"code\",\"code\":\".image {\\n border-radius: 16px;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c345f67-e07c-4f34-8fb0-b39aea2bafbf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Option 2: reduce brightness slightly.","styles":{}}],"children":[]},{"id":"cf8c5085-e9a4-462e-ae2f-3ba4770d2b69","type":"procode","props":{"code":"[data-theme=\"dark\"] .image {\n filter: brightness(0.9);\n}\n","language":"css","filename":"","files":"[{\"id\":\"gbr0dsa4w\",\"name\":\"code\",\"code\":\"[data-theme=\\\"dark\\\"] .image {\\n filter: brightness(0.9);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8554bb21-9e2f-42b1-87e7-59db4c856057","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6d42d98d-4884-4789-a69b-75094cbc0c2f","type":"procode","props":{"code":"Use image filters carefully.\nDo not destroy image quality.\n","language":"txt","filename":"","files":"[{\"id\":\"xdhb2xqv2\",\"name\":\"code\",\"code\":\"Use image filters carefully.\\nDo not destroy image quality.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c189600-13fe-4f47-9f04-e600627ae323","type":"divider","props":{},"children":[]},{"id":"6816140a-45f9-4b0b-8914-5c05e0ee0652","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode for Icons","styles":{}}],"children":[]},{"id":"225b3fcd-9c96-4c89-9ebc-00842db259d6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"currentColor","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a756db4b-c617-48f3-b997-7b78107265ff","type":"procode","props":{"code":"function MoonIcon() {\n return (\n \n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"34yfkzb8i\",\"name\":\"code\",\"code\":\"function MoonIcon() {\\n return (\\n \\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"758b6f54-aad8-4a43-b122-14d66fda4477","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS:","styles":{}}],"children":[]},{"id":"0579ef00-91ce-40df-8ce3-181d640e45b8","type":"procode","props":{"code":".iconButton {\n color: var(--foreground);\n}\n","language":"css","filename":"","files":"[{\"id\":\"b2kk4rari\",\"name\":\"code\",\"code\":\".iconButton {\\n color: var(--foreground);\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6cd4a46-47c7-4ed6-8e53-6cd4159814bd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d97e7e3e-f18e-4409-a139-9fe92ab00f77","type":"procode","props":{"code":"Icon follows text color automatically.\n","language":"txt","filename":"","files":"[{\"id\":\"2waqz8ze0\",\"name\":\"code\",\"code\":\"Icon follows text color automatically.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1ab9fe8c-d801-4ff9-a47a-b30ace93bfa9","type":"divider","props":{},"children":[]},{"id":"b49e866f-e909-485a-af06-bd15f30a740d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode and Accessibility","styles":{}}],"children":[]},{"id":"cd5f1703-6080-4e35-bf86-5ca5d6f5c992","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dark mode still needs good contrast.","styles":{}}],"children":[]},{"id":"f992f1a3-008f-4a3a-9c89-ac7219d62e41","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"855de81d-6c1d-4c42-aa12-b66de5680048","type":"procode","props":{"code":"dark gray text on black background\n","language":"txt","filename":"","files":"[{\"id\":\"yamev5zi3\",\"name\":\"code\",\"code\":\"dark gray text on black background\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c1f60958-7b16-46d6-b3e8-5a7ee2357583","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"bb976ca6-68bb-4cf0-8732-8b64bf7f465b","type":"procode","props":{"code":"light gray text on dark background\n","language":"txt","filename":"","files":"[{\"id\":\"nkim22582\",\"name\":\"code\",\"code\":\"light gray text on dark background\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b6bf393c-1941-4e1b-a8bf-30abb3e7d26d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4e8ee4d7-44a8-4f8b-b7d5-cf402126c566","type":"procode","props":{"code":"Dark mode must still be readable.\n","language":"txt","filename":"","files":"[{\"id\":\"139fxr956\",\"name\":\"code\",\"code\":\"Dark mode must still be readable.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"507a08ba-3e55-47ae-8a48-bd3ff949a8aa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good dark mode checks:","styles":{}}],"children":[]},{"id":"6a421846-071d-48cd-a6a4-94ce339ab4db","type":"procode","props":{"code":"Text is readable\nButtons are visible\nInputs are visible\nFocus state is visible\nError color is visible\nDisabled state is still understandable\n","language":"txt","filename":"","files":"[{\"id\":\"et8o99tiv\",\"name\":\"code\",\"code\":\"Text is readable\\nButtons are visible\\nInputs are visible\\nFocus state is visible\\nError color is visible\\nDisabled state is still understandable\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d2ef065-8dbd-4b00-8ea7-ef620099d3f7","type":"divider","props":{},"children":[]},{"id":"affb3841-2923-4653-939c-d7f6d90c1c55","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Flash of Wrong Theme","styles":{}}],"children":[]},{"id":"436f3652-f486-406a-b096-59d675dd030f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sometimes the app briefly shows light mode before dark mode loads.","styles":{}}],"children":[]},{"id":"695ad4dd-62a2-4900-9532-d83f3a6db860","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"55b11cf0-8923-4136-b720-25183532c6d0","type":"procode","props":{"code":"Page loads\n├── light mode appears quickly\n├── JavaScript runs\n└── dark mode appears\n","language":"txt","filename":"","files":"[{\"id\":\"x7zb3m5lm\",\"name\":\"code\",\"code\":\"Page loads\\n├── light mode appears quickly\\n├── JavaScript runs\\n└── dark mode appears\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1f12ec9-87e5-4deb-9a6c-3c7bdcd350d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is called theme flash.","styles":{}}],"children":[]},{"id":"feeff532-de3c-43f1-b432-9960e7378ec8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better idea:","styles":{}}],"children":[]},{"id":"50e0fb5c-4325-49f5-bbad-a0f88c6f0e4a","type":"procode","props":{"code":"Apply saved theme as early as possible.\n","language":"txt","filename":"","files":"[{\"id\":\"zch22vleb\",\"name\":\"code\",\"code\":\"Apply saved theme as early as possible.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"61e1c3ec-989b-43e3-96f5-eb5ffe155f90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Basic script idea:","styles":{}}],"children":[]},{"id":"ad994d81-b879-454d-ae25-d534e181163d","type":"procode","props":{"code":"\n","language":"html","filename":"","files":"[{\"id\":\"7twczpn8g\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ceb10b9-9f4f-4ab8-ad12-00aa1c82a8f0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"af272e9c-53f3-434c-87be-55496b60cdc9","type":"procode","props":{"code":"Set theme before the app paints when possible.\n","language":"txt","filename":"","files":"[{\"id\":\"s86tw9qda\",\"name\":\"code\",\"code\":\"Set theme before the app paints when possible.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c0c4d7a7-afdc-498e-9f3c-20b054c969f2","type":"divider","props":{},"children":[]},{"id":"9144ff85-beb0-4fc7-8c89-8ca411acb17e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode in React Project Structure","styles":{}}],"children":[]},{"id":"fba1b023-26a3-475a-bfa5-80e8c4519cd8","type":"procode","props":{"code":"src/\n├── App.tsx\n├── main.tsx\n├── styles/\n│ └── globals.css\n│\n├── contexts/\n│ └── theme-context.tsx\n│\n├── components/\n│ ├── ThemeButton.tsx\n│ ├── Card.tsx\n│ └── Navbar.tsx\n│\n└── stores/\n └── use-theme-store.ts\n","language":"txt","filename":"","files":"[{\"id\":\"qx1m5312o\",\"name\":\"code\",\"code\":\"src/\\n├── App.tsx\\n├── main.tsx\\n├── styles/\\n│ └── globals.css\\n│\\n├── contexts/\\n│ └── theme-context.tsx\\n│\\n├── components/\\n│ ├── ThemeButton.tsx\\n│ ├── Card.tsx\\n│ └── Navbar.tsx\\n│\\n└── stores/\\n └── use-theme-store.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47e85c37-8444-46cb-9bbb-d06d31ac2a5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d60f446a-2965-4dfb-a783-4d4a4ed9503e","type":"procode","props":{"code":"globals.css → theme variables\nThemeButton → toggle UI\nContext/Zustand → theme state\n","language":"txt","filename":"","files":"[{\"id\":\"672jbr74v\",\"name\":\"code\",\"code\":\"globals.css → theme variables\\nThemeButton → toggle UI\\nContext/Zustand → theme state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d44df95-b908-4076-9c61-8900758842ea","type":"divider","props":{},"children":[]},{"id":"80c1343f-2543-405c-9ec5-1dfab682d42c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Dark Mode Strategy Options","styles":{}}],"children":[]},{"id":"16026aad-7e82-4e70-a027-66faa98a2ce6","type":"procode","props":{"code":"Dark Mode Strategy\n├── CSS only with prefers-color-scheme\n├── React state with data-theme\n├── React Context with localStorage\n├── Zustand with persist\n├── Tailwind dark variant\n└── Next.js theme package\n","language":"txt","filename":"","files":"[{\"id\":\"tezi87j4d\",\"name\":\"code\",\"code\":\"Dark Mode Strategy\\n├── CSS only with prefers-color-scheme\\n├── React state with data-theme\\n├── React Context with localStorage\\n├── Zustand with persist\\n├── Tailwind dark variant\\n└── Next.js theme package\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e96ef60-6f38-47c3-aea0-6d780b99cfae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple meaning:","styles":{}}],"children":[]},{"id":"fc597c2b-1dd0-45ab-b8bb-3b05c2badddb","type":"procode","props":{"code":"CSS only\n└── simple, follows system, no manual toggle\n\nReact state\n└── good for basic manual toggle\n\nContext\n└── good for app-wide theme state\n\nZustand\n└── good if your app already uses Zustand\n\nTailwind\n└── good if your styling uses Tailwind utilities\n","language":"txt","filename":"","files":"[{\"id\":\"qphqbm47b\",\"name\":\"code\",\"code\":\"CSS only\\n└── simple, follows system, no manual toggle\\n\\nReact state\\n└── good for basic manual toggle\\n\\nContext\\n└── good for app-wide theme state\\n\\nZustand\\n└── good if your app already uses Zustand\\n\\nTailwind\\n└── good if your styling uses Tailwind utilities\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"085da424-439f-43ef-9069-b213b49c4986","type":"divider","props":{},"children":[]},{"id":"f142e41c-7871-41ba-b789-e69cf24149cc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Should You Use Dark Mode?","styles":{}}],"children":[]},{"id":"28623a2f-ed05-4365-920d-ce3eb5e9a735","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use dark mode when:","styles":{}}],"children":[]},{"id":"8d8789de-e4ba-4aa4-b276-0330b87e40bd","type":"procode","props":{"code":"App is used at night\nApp has dashboard UI\nApp has long reading time\nUsers expect theme customization\nApp has professional SaaS feel\nApp supports user preferences\n","language":"txt","filename":"","files":"[{\"id\":\"5z0r5fj83\",\"name\":\"code\",\"code\":\"App is used at night\\nApp has dashboard UI\\nApp has long reading time\\nUsers expect theme customization\\nApp has professional SaaS feel\\nApp supports user preferences\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6168641e-ad09-4f0a-9f5e-cd4e1224a5ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good examples:","styles":{}}],"children":[]},{"id":"314ca9a0-7fda-4ced-b7ca-0e6205fff2b7","type":"procode","props":{"code":"Dashboard\nCode editor\nAdmin panel\nPortfolio\nLearning platform\nChat app\nSaaS project\n","language":"txt","filename":"","files":"[{\"id\":\"z46j705qn\",\"name\":\"code\",\"code\":\"Dashboard\\nCode editor\\nAdmin panel\\nPortfolio\\nLearning platform\\nChat app\\nSaaS project\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bbd26bca-1dc3-45f5-9a87-4979c1adcc2a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b1e29930-9bce-4a8b-81a6-271715f7ac07","type":"procode","props":{"code":"Dark mode is useful when users spend time inside the app.\n","language":"txt","filename":"","files":"[{\"id\":\"97z7z5nr8\",\"name\":\"code\",\"code\":\"Dark mode is useful when users spend time inside the app.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59141f39-6bb0-4414-96a9-b63ec0235c82","type":"divider","props":{},"children":[]},{"id":"a8f6bea1-9f1d-47d2-86ff-4b1b4d51762e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Not to Force Dark Mode?","styles":{}}],"children":[]},{"id":"1db952a3-5143-4f2f-969f-2501a8bf42c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid forcing dark mode when:","styles":{}}],"children":[]},{"id":"a6d1dc0a-3e1c-4cd3-8e68-6aa402f1f86b","type":"procode","props":{"code":"Brand only supports light design\nContrast is not tested\nCharts become unreadable\nImages look bad\nForms become hard to read\nUser has no option to switch back\n","language":"txt","filename":"","files":"[{\"id\":\"8uq2hunq1\",\"name\":\"code\",\"code\":\"Brand only supports light design\\nContrast is not tested\\nCharts become unreadable\\nImages look bad\\nForms become hard to read\\nUser has no option to switch back\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"77639c76-1c3a-48c4-8fc1-ce1432ac1caa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c5131e5f-0b35-4e76-94d9-ac829eb9cb53","type":"procode","props":{"code":"Dark mode should be a choice, not a trap.\n","language":"txt","filename":"","files":"[{\"id\":\"fbvn0cpcr\",\"name\":\"code\",\"code\":\"Dark mode should be a choice, not a trap.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19bd36be-075d-44a4-920a-e571bbff8ce1","type":"divider","props":{},"children":[]},{"id":"c6fcab12-6927-4ae7-bb2f-10b00a09fea1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"3bdec5a5-110f-474a-9e99-a2e75f558df6","type":"procode","props":{"code":"Mistake 1: Only changing body background\nMistake 2: Forgetting text color\nMistake 3: Forgetting border color\nMistake 4: Forgetting input background\nMistake 5: Forgetting placeholder color\nMistake 6: Forgetting hover and focus states\nMistake 7: Using pure black everywhere\nMistake 8: Using poor contrast\nMistake 9: Not saving user preference\nMistake 10: Showing light mode flash before dark mode loads\n","language":"txt","filename":"","files":"[{\"id\":\"keyxaq32v\",\"name\":\"code\",\"code\":\"Mistake 1: Only changing body background\\nMistake 2: Forgetting text color\\nMistake 3: Forgetting border color\\nMistake 4: Forgetting input background\\nMistake 5: Forgetting placeholder color\\nMistake 6: Forgetting hover and focus states\\nMistake 7: Using pure black everywhere\\nMistake 8: Using poor contrast\\nMistake 9: Not saving user preference\\nMistake 10: Showing light mode flash before dark mode loads\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"508d1078-f73b-4a1f-9fc6-5e7fcf526256","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"d47ded5e-815b-49a5-b80e-c3f780c4fbbd","type":"procode","props":{"code":"Use CSS variables.\nUse semantic color names.\nApply theme at the root.\nSave user preference.\nTest every component in both themes.\n","language":"txt","filename":"","files":"[{\"id\":\"u8qo4snag\",\"name\":\"code\",\"code\":\"Use CSS variables.\\nUse semantic color names.\\nApply theme at the root.\\nSave user preference.\\nTest every component in both themes.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"38b72796-6727-4001-9e9b-7861d7b9e99a","type":"divider","props":{},"children":[]},{"id":"ab6035b7-51c1-4903-a1ec-ddb09489008a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"5fa81b48-9fbc-4308-82a9-fb2477caf0aa","type":"procode","props":{"code":"Professional Dark Mode Pattern\n├── Define semantic CSS variables\n├── Use :root for light theme\n├── Use [data-theme=\"dark\"] for dark theme\n├── Apply data-theme on html\n├── Use React state for current theme\n├── Save theme to localStorage\n├── Use system preference as fallback\n├── Use Context or Zustand for larger apps\n├── Keep colors readable\n├── Style cards, borders, forms, icons, and focus states\n├── Avoid pure black everywhere\n├── Avoid theme flash\n├── Test both light and dark mode\n└── Keep theme logic separate from component UI\n","language":"txt","filename":"","files":"[{\"id\":\"dsymp8itl\",\"name\":\"code\",\"code\":\"Professional Dark Mode Pattern\\n├── Define semantic CSS variables\\n├── Use :root for light theme\\n├── Use [data-theme=\\\"dark\\\"] for dark theme\\n├── Apply data-theme on html\\n├── Use React state for current theme\\n├── Save theme to localStorage\\n├── Use system preference as fallback\\n├── Use Context or Zustand for larger apps\\n├── Keep colors readable\\n├── Style cards, borders, forms, icons, and focus states\\n├── Avoid pure black everywhere\\n├── Avoid theme flash\\n├── Test both light and dark mode\\n└── Keep theme logic separate from component UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8b92def6-de7c-413b-b3b4-b68b6722d5b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended beginner pattern:","styles":{}}],"children":[]},{"id":"92aea4e7-2882-4a8d-a6cd-b1d5ff9b9fc6","type":"procode","props":{"code":"CSS variables\n└── data-theme\n └── React state\n └── localStorage\n","language":"txt","filename":"","files":"[{\"id\":\"5ihcgd2hx\",\"name\":\"code\",\"code\":\"CSS variables\\n└── data-theme\\n └── React state\\n └── localStorage\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af2bfc76-6499-43aa-ad16-0565c92cba2f","type":"divider","props":{},"children":[]},{"id":"b6b15ca3-1405-4512-916c-a04f1e857398","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"827562d1-530f-4f6c-a2d1-b7e69b1cbed3","type":"procode","props":{"code":"Dark Mode = same components, different color variables\n","language":"txt","filename":"","files":"[{\"id\":\"zknjv1jzh\",\"name\":\"code\",\"code\":\"Dark Mode = same components, different color variables\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2fad78f-2a33-4134-8bf3-9b82f0ee0cad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"4764c9af-9902-4fa0-a0f6-8b3f4d07603e","type":"procode","props":{"code":"Component\n├── uses var(--background)\n├── uses var(--foreground)\n├── uses var(--border)\n└── theme changes variable values\n","language":"txt","filename":"","files":"[{\"id\":\"el1i5k22m\",\"name\":\"code\",\"code\":\"Component\\n├── uses var(--background)\\n├── uses var(--foreground)\\n├── uses var(--border)\\n└── theme changes variable values\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5cf5c5b7-f240-4d62-8899-5615395c328a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Best rule:","styles":{}}],"children":[]},{"id":"0ae17c82-3a7c-442c-867b-05951adc6c3a","type":"procode","props":{"code":"Do not hardcode colors everywhere.\nUse theme variables.\n","language":"txt","filename":"","files":"[{\"id\":\"ntz4a0yxi\",\"name\":\"code\",\"code\":\"Do not hardcode colors everywhere.\\nUse theme variables.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"38f1143b-2fb9-42fb-9c97-e83c4399fc25","type":"divider","props":{},"children":[]},{"id":"3b519cb0-2cca-49c3-853a-252f307b0b9d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"e067d2c5-f1eb-498e-bb36-50f4acb6af70","type":"procode","props":{"code":"Dark Mode\n├── Switches UI between light and dark theme\n├── Can follow system preference\n├── Can use prefers-color-scheme\n├── Can use data-theme\n├── Can use CSS variables\n├── Can use React state\n├── Can save preference in localStorage\n├── Can use Context for app-wide theme\n├── Can use Zustand for global theme state\n├── Can use Tailwind dark variant\n├── Should style background, text, card, border, input, and focus states\n├── Should use semantic color variables\n├── Should avoid poor contrast\n├── Should avoid pure black everywhere\n└── Should remember user preference\n","language":"txt","filename":"","files":"[{\"id\":\"q6xbyy144\",\"name\":\"code\",\"code\":\"Dark Mode\\n├── Switches UI between light and dark theme\\n├── Can follow system preference\\n├── Can use prefers-color-scheme\\n├── Can use data-theme\\n├── Can use CSS variables\\n├── Can use React state\\n├── Can save preference in localStorage\\n├── Can use Context for app-wide theme\\n├── Can use Zustand for global theme state\\n├── Can use Tailwind dark variant\\n├── Should style background, text, card, border, input, and focus states\\n├── Should use semantic color variables\\n├── Should avoid poor contrast\\n├── Should avoid pure black everywhere\\n└── Should remember user preference\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b2219a8d-d179-46a1-adf7-255f9cb9d919","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dark mode is important because it improves user customization and makes your app feel more polished. The professional rule is simple: ","styles":{}},{"type":"text","text":"use semantic CSS variables, apply the theme at the root, save the user preference, and test every component in both light and dark mode","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"c5a8f258-a822-44e2-80b8-c449b835f239","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]