[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"playground-css-light-dark-function":32},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","โ—‡","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","โŒ˜",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"slug":33,"title":34,"summary":35,"html":36,"css":37,"js":38,"config":39,"doc":41},"css-light-dark-function","light-dark() โ€” one rule, both themes",null,"\u003Cdiv class=\"pg\">\n \u003Ch1 class=\"pg-title\">๐ŸŽฎ \u003Ccode>light-dark()\u003C\u002Fcode> โ€” one rule, both themes\u003C\u002Fh1>\n \u003Cp class=\"pg-sub\">\n Six color pairs are declared \u003Cstrong>once\u003C\u002Fstrong> in this page, with\n \u003Ccode>light-dark(light, dark)\u003C\u002Fcode>. There is no\n \u003Ccode>@media (prefers-color-scheme: dark)\u003C\u002Fcode> block anywhere in the file.\n Watch the same declarations produce two different designs โ€” then set\n \u003Ccode>color-scheme\u003C\u002Fcode> yourself and find the bug that catches everyone.\n \u003C\u002Fp>\n\n \u003Cdiv class=\"banner info\" id=\"support\" hidden>\n \u003Cstrong>Heads up:\u003C\u002Fstrong> this browser doesn't support \u003Ccode>light-dark()\u003C\u002Fcode>,\n so the panels below will all look light. It needs Chrome 123+, Firefox 120+,\n or Safari 17.5+.\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"panel\">\n \u003Cdiv class=\"panel-label\">\u003Cspan class=\"n\">1\u003C\u002Fspan> The same CSS, two schemes\u003C\u002Fdiv>\n \u003Cp class=\"hint\" style=\"margin-top:0\">\n Both cards below are styled by the \u003Cem>identical\u003C\u002Fem> five declarations. The only\n difference is the \u003Ccode>color-scheme\u003C\u002Fcode> on their container. This pair is always\n shown so you can see both outcomes no matter what your own device prefers.\n \u003C\u002Fp>\n \u003Cdiv class=\"two-up\">\n \u003Cdiv class=\"scheme scheme-light\">\n \u003Cdiv class=\"scheme-head\">\u003Cb>Light\u003C\u002Fb>\u003Ccode>color-scheme: light\u003C\u002Fcode>\u003C\u002Fdiv>\n \u003Cdiv class=\"demo-card\">\n \u003Ch4>Monthly report\u003C\u002Fh4>\n \u003Cp>Your team shipped 24 changes this week, up from 18.\u003C\u002Fp>\n \u003Cbutton class=\"demo-cta\" type=\"button\">View report\u003C\u002Fbutton>\n \u003Cinput class=\"demo-input\" type=\"text\" placeholder=\"Search reportsโ€ฆ\" aria-label=\"Search reports (light preview)\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"scheme scheme-dark\">\n \u003Cdiv class=\"scheme-head\">\u003Cb>Dark\u003C\u002Fb>\u003Ccode>color-scheme: dark\u003C\u002Fcode>\u003C\u002Fdiv>\n \u003Cdiv class=\"demo-card\">\n \u003Ch4>Monthly report\u003C\u002Fh4>\n \u003Cp>Your team shipped 24 changes this week, up from 18.\u003C\u002Fp>\n \u003Cbutton class=\"demo-cta\" type=\"button\">View report\u003C\u002Fbutton>\n \u003Cinput class=\"demo-input\" type=\"text\" placeholder=\"Search reportsโ€ฆ\" aria-label=\"Search reports (dark preview)\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cp class=\"hint\">\n Notice the text cursor and placeholder in each search box, and the scrollbars if you\n shrink the window. \u003Ccode>color-scheme\u003C\u002Fcode> restyles the browser's own widgets too โ€”\n that's a second job the media-query approach never did for you.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"panel\">\n \u003Cdiv class=\"panel-label\">\u003Cspan class=\"n\">2\u003C\u002Fspan> Now you drive \u003Ccode>color-scheme\u003C\u002Fcode>\u003C\u002Fdiv>\n\n \u003Cdiv class=\"seg\" id=\"seg\" role=\"group\" aria-label=\"color-scheme value\">\n \u003Cbutton type=\"button\" data-cs=\"normal\" aria-pressed=\"false\">normal\u003C\u002Fbutton>\n \u003Cbutton type=\"button\" data-cs=\"light dark\" aria-pressed=\"true\">light dark\u003C\u002Fbutton>\n \u003Cbutton type=\"button\" data-cs=\"light\" aria-pressed=\"false\">light\u003C\u002Fbutton>\n \u003Cbutton type=\"button\" data-cs=\"dark\" aria-pressed=\"false\">dark\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003Cp class=\"hint\" style=\"margin-bottom:14px\">\n This sets \u003Ccode>color-scheme\u003C\u002Fcode> on the preview below โ€” exactly what\n \u003Ccode>document.documentElement.style.colorScheme = โ€ฆ\u003C\u002Fcode> does in a real theme toggle.\n \u003C\u002Fp>\n\n \u003Cdiv class=\"scheme\" id=\"live\">\n \u003Cdiv class=\"scheme-head\">\n \u003Cb>Your setting\u003C\u002Fb>\u003Ccode id=\"liveCs\">color-scheme: light dark\u003C\u002Fcode>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"demo-card\">\n \u003Ch4>Monthly report\u003C\u002Fh4>\n \u003Cp>Your team shipped 24 changes this week, up from 18.\u003C\u002Fp>\n \u003Cbutton class=\"demo-cta\" type=\"button\">View report\u003C\u002Fbutton>\n \u003Cinput class=\"demo-input\" type=\"text\" placeholder=\"Search reportsโ€ฆ\" aria-label=\"Search reports (live preview)\" \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"status\" id=\"status\" style=\"margin-top:14px\">\n \u003Cspan class=\"dot info\" id=\"dot\">\u003C\u002Fspan>\u003Cspan id=\"statusText\">Following your system preference.\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"hint\" id=\"hint\">\n Your device currently prefers \u003Cb id=\"sysPref\">โ€ฆ\u003C\u002Fb>.\n \u003C\u002Fp>\n\n \u003Cdiv class=\"presets\">\n \u003Cbutton class=\"btn sm\" data-preset=\"normal\">๐Ÿ› Reproduce the bug\u003C\u002Fbutton>\n \u003Cbutton class=\"btn sm\" data-preset=\"light dark\">โœ… Correct setup\u003C\u002Fbutton>\n \u003Cbutton class=\"btn sm\" data-preset=\"dark\">๐ŸŒ™ User forced dark\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"panel\">\n \u003Cdiv class=\"panel-label\">\u003Cspan class=\"n\">3\u003C\u002Fspan> Which argument won, and why\u003C\u002Fdiv>\n \u003Cp class=\"hint\" style=\"margin-top:0\">\n The \u003Cspan class=\"mono arg-off\">struck-through\u003C\u002Fspan> value is the one the browser\n discarded for your current setting. Same source, different pick.\n \u003C\u002Fp>\n \u003Cdiv class=\"code\" id=\"code\" aria-live=\"polite\">\u003C\u002Fdiv>\n \u003Cdiv class=\"swatches\" id=\"swatches\" aria-live=\"polite\">\u003C\u002Fdiv>\n \u003Cp class=\"hint\">\n The values on the right are the colors that actually \u003Cem>painted\u003C\u002Fem>. Worth knowing:\n reading a custom property back with \u003Ccode>getComputedStyle()\u003C\u002Fcode> hands you the\n literal string \u003Ccode>light-dark(#ffffff, #1f2937)\u003C\u002Fcode>, not a color โ€” the function\n resolves only when a real property uses the value. This panel reads invisible probe\n elements inside the preview to get the resolved color.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>","\u002F*\n * Shared playground design system โ€” daily-post\n * ============================================\n * Link it from any post's playground\u002Findex.html (no per-post boilerplate):\n *\n * \u003Clink rel=\"stylesheet\" href=\"..\u002F..\u002F..\u002Fplayground\u002Fassets\u002Fbase.css\" \u002F>\n *\n * The relative path resolves the same locally (posts\u002F\u003Cbase>\u002Fplayground\u002F) and on\n * the deployed host (public\u002Fposts\u002F\u003Cbase>\u002Fplayground\u002F), because build-site.js\n * mirrors this file to public\u002Fplayground\u002Fassets\u002Fbase.css. For a CodeSandbox\n * --embed, playground.js inlines this file so the single-file sandbox still styles.\n *\n * Then write ONLY the demo-specific CSS in your inline \u003Cstyle>. Everything below\n * โ€” tokens, layout, panels, buttons, toggles, sliders, code blocks, status\u002Flog,\n * banners, presets โ€” comes for free and looks consistent across every post.\n *\n * Theme-aware: dark by default, light via prefers-color-scheme AND a\n * [data-theme] override on \u003Chtml> (so a toggle can force either). Accessible:\n * real focus rings, adequate contrast, reduced-motion honored.\n *\u002F\n\n\u002F* ---------- design tokens ---------- *\u002F\n:root {\n --bg: #0d1117;\n --bg-grid: #ffffff0a;\n --panel: #161b22;\n --panel-2: #0b0e14;\n --card: #0b0e14;\n --ink: #e8ebf2;\n --muted: #9aa4b2;\n --faint: #6b7688;\n --line: #232a35;\n --line-soft: #ffffff12;\n --accent: #7c9cff;\n --accent-ink: #0b0e14;\n --good: #3fb950;\n --warn: #f0883e;\n --bad: #f85149;\n --info: #58a6ff;\n --radius: 14px;\n --radius-sm: 9px;\n --shadow: 0 8px 30px #0006;\n --shadow-sm: 0 4px 14px #0005;\n --mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n --sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n color-scheme: dark;\n}\n\n\u002F* Light theme โ€” system preference, overridable by [data-theme] on \u003Chtml>. *\u002F\n@media (prefers-color-scheme: light) {\n :root:not([data-theme=\"dark\"]) {\n --bg: #f4f6fb;\n --bg-grid: #00000008;\n --panel: #ffffff;\n --panel-2: #f0f3f9;\n --card: #f7f9fc;\n --ink: #131722;\n --muted: #5b6472;\n --faint: #8a93a3;\n --line: #e2e7f0;\n --line-soft: #00000010;\n --accent: #2f6df0;\n --accent-ink: #ffffff;\n --good: #1a7f37;\n --warn: #bc4c00;\n --bad: #cf222e;\n --info: #0969da;\n --shadow: 0 8px 30px #0000001f;\n --shadow-sm: 0 4px 14px #00000014;\n color-scheme: light;\n }\n}\n:root[data-theme=\"light\"] {\n --bg: #f4f6fb;\n --bg-grid: #00000008;\n --panel: #ffffff;\n --panel-2: #f0f3f9;\n --card: #f7f9fc;\n --ink: #131722;\n --muted: #5b6472;\n --faint: #8a93a3;\n --line: #e2e7f0;\n --line-soft: #00000010;\n --accent: #2f6df0;\n --accent-ink: #ffffff;\n --good: #1a7f37;\n --warn: #bc4c00;\n --bad: #cf222e;\n --info: #0969da;\n --shadow: 0 8px 30px #0000001f;\n --shadow-sm: 0 4px 14px #00000014;\n color-scheme: light;\n}\n\n\u002F* ---------- reset & base ---------- *\u002F\n*, *::before, *::after { box-sizing: border-box; }\n\nbody {\n margin: 0;\n min-height: 100vh;\n font-family: var(--sans);\n color: var(--ink);\n background:\n radial-gradient(circle at 1px 1px, var(--bg-grid) 1px, transparent 0) 0 0 \u002F 24px 24px,\n var(--bg);\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: clamp(14px, 3vw, 26px);\n line-height: 1.55;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n\u002F* The single content column. *\u002F\n.pg {\n width: 100%;\n max-width: 860px;\n}\n\n\u002F* ---------- header ---------- *\u002F\n.pg-title {\n font-size: clamp(1.15rem, 1rem + 1vw, 1.4rem);\n font-weight: 800;\n letter-spacing: -0.02em;\n margin: 0 0 4px;\n display: flex;\n align-items: center;\n gap: 9px;\n}\n.pg-sub {\n color: var(--muted);\n font-size: 0.92rem;\n line-height: 1.5;\n margin: 0 0 16px;\n max-width: 66ch;\n}\n.pg-sub strong, .pg-sub b { color: var(--ink); font-weight: 700; }\n.pg-sub code { font-family: var(--mono); background: var(--line-soft); color: var(--accent);\n padding: 1px 6px; border-radius: 6px; font-size: 0.85em; }\n\n\u002F* ---------- panels ---------- *\u002F\n.panel {\n background: var(--panel);\n border: 1px solid var(--line);\n border-radius: var(--radius);\n padding: 16px 18px;\n margin-bottom: 14px;\n box-shadow: var(--shadow-sm);\n}\n.panel-label {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--muted);\n font-weight: 800;\n margin: 0 0 13px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.panel-label .n {\n display: inline-grid; place-items: center;\n width: 18px; height: 18px; border-radius: 50%;\n background: var(--accent); color: var(--accent-ink);\n font-size: 0.66rem; font-weight: 800;\n}\n\n\u002F* ---------- layout helpers ---------- *\u002F\n.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }\n.row.between { justify-content: space-between; }\n.col { display: flex; flex-direction: column; gap: 10px; }\n.grow { flex: 1 1 0; min-width: 0; }\n.wrap-controls { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }\n.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }\n.field > .label, .ctl-label {\n font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;\n color: var(--muted); font-weight: 800;\n}\n\n\u002F* ---------- buttons ---------- *\u002F\n.btn {\n font: inherit; font-weight: 650; font-size: 0.88rem;\n cursor: pointer; user-select: none;\n border: 1px solid var(--line);\n background: var(--card); color: var(--ink);\n padding: 9px 15px; border-radius: var(--radius-sm);\n display: inline-flex; align-items: center; gap: 8px;\n transition: background .15s ease, border-color .15s ease, transform .05s ease, color .15s ease;\n}\n.btn:hover { background: var(--line-soft); border-color: var(--muted); }\n.btn:active { transform: translateY(1px); }\n.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.btn[disabled] { opacity: 0.45; cursor: not-allowed; }\n.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }\n.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }\n.btn.good { background: var(--good); border-color: var(--good); color: #04140a; }\n.btn.bad { background: var(--bad); border-color: var(--bad); color: #fff; }\n.btn.ghost { background: transparent; }\n.btn.sm { padding: 6px 11px; font-size: 0.82rem; }\n\n.btn-row { display: flex; flex-wrap: wrap; gap: 9px; }\n\n\u002F* Segmented control โ€” a row of buttons where one is active (aria-pressed). *\u002F\n.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line);\n border-radius: var(--radius-sm); padding: 3px; gap: 3px; }\n.seg button {\n font: inherit; font-weight: 650; font-size: 0.84rem; cursor: pointer;\n border: none; background: transparent; color: var(--muted);\n padding: 7px 13px; border-radius: 7px;\n transition: background .15s ease, color .15s ease;\n}\n.seg button:hover { color: var(--ink); }\n.seg button[aria-pressed=\"true\"] { background: var(--accent); color: var(--accent-ink); }\n.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n\n\u002F* Preset chips โ€” worked-example shortcuts. *\u002F\n.presets { display: flex; flex-wrap: wrap; gap: 8px; }\n.presets .btn { background: var(--panel-2); }\n\n\u002F* ---------- toggle switch ---------- *\u002F\n.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;\n font-size: 0.88rem; font-weight: 600; user-select: none; }\n.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }\n.switch { position: relative; width: 44px; height: 25px; border-radius: 999px; flex: none;\n background: var(--line); border: 1px solid var(--line); transition: background .18s ease; }\n.switch::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;\n border-radius: 50%; background: #cfd6e4; transition: transform .18s ease; box-shadow: 0 1px 3px #0006; }\n.toggle input:checked + .switch { background: var(--good); border-color: var(--good); }\n.toggle input:checked + .switch::after { transform: translateX(19px); background: #fff; }\n.toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }\n\n\u002F* ---------- range slider ---------- *\u002F\ninput[type=\"range\"] {\n -webkit-appearance: none; appearance: none; width: 100%; height: 6px;\n background: var(--line); border-radius: 999px; outline: none; cursor: pointer; margin: 8px 0;\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none; appearance: none; width: 19px; height: 19px; border-radius: 50%;\n background: var(--accent); border: 2px solid var(--panel); box-shadow: var(--shadow-sm); cursor: pointer;\n}\ninput[type=\"range\"]::-moz-range-thumb {\n width: 19px; height: 19px; border-radius: 50%; background: var(--accent);\n border: 2px solid var(--panel); box-shadow: var(--shadow-sm); cursor: pointer;\n}\ninput[type=\"range\"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }\n\n\u002F* ---------- text inputs \u002F selects ---------- *\u002F\ninput[type=\"text\"], input[type=\"number\"], input[type=\"search\"], select, textarea {\n font: inherit; color: var(--ink); background: var(--card);\n border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; width: 100%;\n}\ntextarea { font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; resize: vertical; }\ninput:focus-visible, select:focus-visible, textarea:focus-visible {\n outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);\n}\n\n\u002F* ---------- status \u002F output \u002F log ---------- *\u002F\n.status {\n display: flex; align-items: center; gap: 9px; flex-wrap: wrap;\n font-size: 0.9rem; font-weight: 600;\n padding: 11px 14px; border-radius: var(--radius-sm);\n background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);\n}\n.status.good { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }\n.status.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }\n.status.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }\n.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }\n.dot.good { background: var(--good); } .dot.warn { background: var(--warn); }\n.dot.bad { background: var(--bad); } .dot.info { background: var(--info); }\n\n.output { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);\n padding: 13px 15px; }\n.log { font-family: var(--mono); font-size: 0.8rem; line-height: 1.7; background: var(--card);\n border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px;\n max-height: 220px; overflow-y: auto; white-space: pre-wrap; }\n\n\u002F* ---------- code block + syntax tokens ---------- *\u002F\n.code {\n font-family: var(--mono); font-size: 0.82rem; line-height: 1.7;\n background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);\n padding: 13px 15px; overflow-x: auto; white-space: pre; tab-size: 2;\n}\n.code .tok-sel { color: var(--accent); }\n.code .tok-prop { color: #86e29b; }\n.code .tok-kw { color: #ff9bcb; }\n.code .tok-str { color: #f0c674; }\n.code .tok-num { color: #f0883e; }\n.code .tok-cmt { color: var(--faint); font-style: italic; }\n.code .hl { background: color-mix(in srgb, var(--good) 22%, transparent); border-radius: 4px; padding: 0 3px; }\n\n\u002F* ---------- hint \u002F caption ---------- *\u002F\n.hint { font-size: 0.83rem; color: var(--muted); line-height: 1.55; margin: 10px 0 0; }\n.hint code { font-family: var(--mono); color: var(--ink); background: var(--line-soft);\n padding: 1px 5px; border-radius: 5px; font-size: 0.86em; }\n.hint strong { color: var(--ink); }\n\n\u002F* ---------- banner (feature-support \u002F notices) ---------- *\u002F\n.banner {\n display: none; margin-bottom: 14px; padding: 11px 14px; border-radius: 11px;\n font-size: 0.85rem; line-height: 1.5;\n color: var(--ink); background: color-mix(in srgb, var(--warn) 12%, var(--panel));\n border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));\n}\n.banner.show { display: block; }\n.banner.info { background: color-mix(in srgb, var(--info) 12%, var(--panel));\n border-color: color-mix(in srgb, var(--info) 45%, var(--line)); }\n.banner code { font-family: var(--mono); background: var(--line-soft); padding: 1px 5px; border-radius: 5px; }\n\n\u002F* ---------- misc atoms ---------- *\u002F\n.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700;\n padding: 3px 9px; border-radius: 999px; background: var(--line-soft); color: var(--muted); }\n.pill.good { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }\n.pill.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }\n.mono { font-family: var(--mono); }\n.muted { color: var(--muted); }\n.big-num { font-family: var(--mono); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }\n\n\u002F* Optional theme toggle button (top-right). Wire it in JS if you want it. *\u002F\n.theme-btn { position: fixed; top: 12px; right: 12px; z-index: 20; }\n\n\u002F* ---------- responsive ---------- *\u002F\n@media (max-width: 560px) {\n .panel { padding: 14px; }\n .wrap-controls { gap: 14px; }\n .btn { padding: 9px 13px; }\n}\n\n\u002F* ---------- reduced motion ---------- *\u002F\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }\n}\n\n\n\u002F* ---- The demo's palette: every pair written ONCE, with light-dark(). ----\n This is the whole point of the post. There is no @media block anywhere in\n this file. Each `.scheme` box below just sets a different `color-scheme`,\n and the same five declarations resolve differently inside it. *\u002F\n .scheme {\n --bg-surface: light-dark(#ffffff, #1f2937);\n --bg-subtle: light-dark(#f9fafb, #111827);\n --text-primary: light-dark(#111827, #f9fafb);\n --text-muted: light-dark(#6b7280, #9ca3af);\n --border-subtle: light-dark(#e5e7eb, #374151);\n --brand: light-dark(oklch(45% 0.18 265), oklch(82% 0.13 265));\n\n background: var(--bg-subtle);\n color: var(--text-primary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-sm);\n padding: 14px;\n transition: background-color .18s ease, color .18s ease, border-color .18s ease;\n }\n @media (prefers-reduced-motion: reduce) { .scheme { transition: none; } }\n\n .scheme-light { color-scheme: light; }\n .scheme-dark { color-scheme: dark; }\n\n .scheme-head {\n display: flex; align-items: baseline; justify-content: space-between;\n gap: 8px; margin-bottom: 10px;\n }\n .scheme-head b { font-size: .8rem; }\n .scheme-head code { font-family: var(--mono); font-size: .72rem; color: var(--text-muted); }\n\n \u002F* A miniature card + sidebar, built only from the tokens above. *\u002F\n .demo-card {\n background: var(--bg-surface);\n border: 1px solid var(--border-subtle);\n border-radius: 8px;\n padding: 12px;\n box-shadow: 0 1px 3px light-dark(rgba(0,0,0,.10), rgba(0,0,0,.50));\n }\n .demo-card h4 { margin: 0 0 6px; font-size: .92rem; color: var(--text-primary); }\n .demo-card p { margin: 0 0 10px; font-size: .78rem; line-height: 1.5; color: var(--text-muted); }\n .demo-cta {\n display: inline-block; font-size: .74rem; font-weight: 700;\n padding: 5px 11px; border-radius: 6px;\n background: var(--brand); color: var(--bg-surface);\n border: 0; cursor: pointer; font-family: inherit;\n }\n .demo-input {\n margin-top: 10px; width: 100%; box-sizing: border-box;\n font-family: inherit; font-size: .74rem; padding: 5px 8px;\n border-radius: 6px;\n border: 1px solid var(--border-subtle);\n background: var(--bg-subtle); color: var(--text-primary);\n }\n\n .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n @media (max-width: 620px) { .two-up { grid-template-columns: 1fr; } }\n\n \u002F* Resolved-value readout *\u002F\n .swatches { display: grid; gap: 6px; margin-top: 12px; }\n .sw-row {\n display: grid; grid-template-columns: 20px 1fr auto;\n align-items: center; gap: 10px;\n font-family: var(--mono); font-size: .74rem;\n }\n .sw {\n width: 20px; height: 20px; border-radius: 5px;\n border: 1px solid var(--line); flex: none;\n }\n .sw-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sw-val { color: var(--ink); }\n\n .arg-off { opacity: .38; text-decoration: line-through; }","\"use strict\";\n const $ = (id) => document.getElementById(id);\n\n \u002F\u002F The six pairs, kept in sync with the CSS above purely for the readout.\n const PAIRS = [\n [\"--bg-surface\", \"#ffffff\", \"#1f2937\"],\n [\"--bg-subtle\", \"#f9fafb\", \"#111827\"],\n [\"--text-primary\", \"#111827\", \"#f9fafb\"],\n [\"--text-muted\", \"#6b7280\", \"#9ca3af\"],\n [\"--border-subtle\", \"#e5e7eb\", \"#374151\"],\n [\"--brand\", \"oklch(45% 0.18 265)\", \"oklch(82% 0.13 265)\"],\n ];\n\n const supported = window.CSS && CSS.supports(\"color\", \"light-dark(white, black)\");\n if (!supported) $(\"support\").hidden = false;\n\n \u002F* Reading a custom property back gives you its TOKEN TEXT โ€” getComputedStyle()\n on `--bg-surface` returns the literal string \"light-dark(#ffffff, #1f2937)\",\n because light-dark() resolves only when the value is actually used by a real\n property. So to show the color that truly painted, put one invisible probe\n per token INSIDE the preview (where the color-scheme applies) and read its\n computed `color` instead. *\u002F\n const probeHost = document.createElement(\"div\");\n probeHost.setAttribute(\"aria-hidden\", \"true\");\n probeHost.style.cssText = \"position:absolute;width:0;height:0;overflow:hidden\";\n const probes = PAIRS.map(([name]) => {\n const span = document.createElement(\"span\");\n span.style.color = `var(${name})`;\n probeHost.appendChild(span);\n return span;\n });\n $(\"live\").appendChild(probeHost);\n\n const darkQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n let current = \"light dark\";\n\n \u002F\u002F Which of the two arguments a given color-scheme value resolves to.\n \u002F\u002F `normal` supports light only, so light-dark() returns its FIRST argument โ€”\n \u002F\u002F this is the silent bug the post is about.\n function resolvesDark(cs) {\n if (cs === \"dark\") return true;\n if (cs === \"light\" || cs === \"normal\") return false;\n return darkQuery.matches; \u002F\u002F \"light dark\" follows the system\n }\n\n function render() {\n const isDark = resolvesDark(current);\n\n $(\"live\").style.colorScheme = current;\n $(\"liveCs\").textContent = \"color-scheme: \" + current;\n\n \u002F\u002F Status line โ€” say plainly what happened and, for `normal`, why it's a bug.\n const sys = darkQuery.matches ? \"dark\" : \"light\";\n if (current === \"normal\") {\n setStatus(\n darkQuery.matches\n ? \"Bug reproduced: your system asks for dark, but the card is light.\"\n : \"The dark values are unreachable here โ€” nothing errors, they simply never apply.\",\n \"bad\"\n );\n $(\"hint\").innerHTML =\n \"\u003Ccode>normal\u003C\u002Fcode> is the \u003Cem>initial value\u003C\u002Fem> of \u003Ccode>color-scheme\u003C\u002Fcode> โ€” \" +\n \"the state you are in when you forget the \u003Ccode>:root\u003C\u002Fcode> declaration. The element \" +\n \"supports light only, so \u003Ccode>light-dark()\u003C\u002Fcode> always returns its first argument. \" +\n \"Your device currently prefers \u003Cb>\" + sys + \"\u003C\u002Fb>.\";\n } else if (current === \"light dark\") {\n setStatus(\"Following your system preference โ†’ resolving to the \" + (isDark ? \"dark\" : \"light\") + \" value.\", \"good\");\n $(\"hint\").innerHTML =\n \"This is the one line you actually need on \u003Ccode>:root\u003C\u002Fcode>. Your device currently \" +\n \"prefers \u003Cb>\" + sys + \"\u003C\u002Fb>, so change your OS appearance setting and this preview \" +\n \"follows it with no JavaScript at all.\";\n } else {\n setStatus(\"Forced to \" + current + \" โ€” the system preference is overridden.\", \"warn\");\n $(\"hint\").innerHTML =\n \"This is what a theme toggle does: assign \u003Ccode>colorScheme\u003C\u002Fcode> on the root element. \" +\n \"Set it back to an empty string to fall through to the system again. Your device \" +\n \"currently prefers \u003Cb>\" + sys + \"\u003C\u002Fb>.\";\n }\n\n \u002F\u002F Source readout, with the losing argument struck through.\n $(\"code\").innerHTML = PAIRS.map(([name, light, dark]) => {\n const l = '\u003Cspan class=\"tok-str' + (isDark ? \" arg-off\" : \"\") + '\">' + light + \"\u003C\u002Fspan>\";\n const d = '\u003Cspan class=\"tok-str' + (isDark ? \"\" : \" arg-off\") + '\">' + dark + \"\u003C\u002Fspan>\";\n return '\u003Cspan class=\"tok-prop\">' + name + \"\u003C\u002Fspan>: \" +\n '\u003Cspan class=\"tok-kw\">light-dark\u003C\u002Fspan>(' + l + \", \" + d + \");\";\n }).join(\"\u003Cbr>\");\n\n \u002F\u002F What actually painted, read off the probes inside the preview.\n $(\"swatches\").innerHTML = PAIRS.map(([name], i) => {\n const val = getComputedStyle(probes[i]).color;\n return '\u003Cdiv class=\"sw-row\">' +\n '\u003Cspan class=\"sw\" style=\"background:' + val + '\">\u003C\u002Fspan>' +\n '\u003Cspan class=\"sw-name\">' + name + \"\u003C\u002Fspan>\" +\n '\u003Cspan class=\"sw-val\">' + (val || \"โ€”\") + \"\u003C\u002Fspan>\" +\n \"\u003C\u002Fdiv>\";\n }).join(\"\");\n }\n\n function setStatus(text, kind) {\n $(\"statusText\").textContent = text;\n $(\"dot\").className = \"dot \" + kind;\n $(\"status\").className = \"status \" + kind;\n }\n\n function select(cs) {\n current = cs;\n for (const b of $(\"seg\").children) {\n b.setAttribute(\"aria-pressed\", String(b.dataset.cs === cs));\n }\n render();\n }\n\n $(\"seg\").addEventListener(\"click\", (e) => {\n const btn = e.target.closest(\"button[data-cs]\");\n if (btn) select(btn.dataset.cs);\n });\n\n document.querySelectorAll(\"[data-preset]\").forEach((b) => {\n b.addEventListener(\"click\", () => select(b.dataset.preset));\n });\n\n \u002F\u002F Keep the readout honest when the OS theme changes mid-session.\n darkQuery.addEventListener(\"change\", render);\n\n $(\"sysPref\").textContent = darkQuery.matches ? \"dark\" : \"light\";\n select(\"light dark\");",{"height":40,"autorun":17},520,{"slug":33,"title":42,"excerpt":43,"coverUrl":44},"You're writing dark-mode colors twice. `light-dark()` fixes that.","Every `@media (prefers-color-scheme: dark)` block duplicates your color definitions. `light-dark()` lets you write both values on the same line, in the same rule, with no separate block and no build step. Baseline 2024.","\u002Fmedia\u002Fcovers\u002Fcss-light-dark-function.png"]