{"id":"code-dev-css-dark-mode-custom-properties","audience":"developers","category":"coding","track":"coding","technique":"constraints","title":"Add dark mode by overriding your existing CSS variables","free":false,"task":"Add dark mode to the marketing site using only the existing custom properties: one @media (prefers-color-scheme: dark) block that redefines --bg as #111827, --text as #f9fafb and --muted as #9ca3af on :root, leaving --accent alone. Don't touch any other rule, add no new variables and no !important. Return only the new block in exactly 1 code block of at most 8 lines, under 20 words of text.","materialLabel":"The stylesheet (attached to your prompt automatically)","material":"/* site.css - Quillfeather marketing site */\n:root {\n  --bg: #ffffff;\n  --text: #1f2937;\n  --muted: #6b7280;\n  --accent: #2563eb;\n  --radius: 10px;\n}\n\nbody {\n  background: var(--bg);\n  color: var(--text);\n  font: 16px/1.6 \"Inter\", system-ui, sans-serif;\n}\n\n.hero p,\n.card .meta {\n  color: var(--muted);\n}\n\na,\n.button {\n  color: var(--accent);\n}\n\n.button {\n  border: 2px solid var(--accent);\n  border-radius: var(--radius);\n  padding: 0.6rem 1.2rem;\n}\n\n.card {\n  background: var(--bg);\n  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);\n  border-radius: var(--radius);\n}\n\n.footer {\n  color: var(--muted);\n  font-size: 0.875rem;\n  padding: 2rem 0;\n}","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":8},{"type":"maxProseWords","max":20}],"mistakes":[{"title":"Rewriting every rule","why":"The AI often adds dark versions of body, .card and .button instead of just swapping the variables.","fix":"Say: \"Only redefine the variables on :root inside one media block.\"","checks":["r0","r2"]},{"title":"Guessing the palette","why":"The AI picks its own dark colors.","fix":"Give them: \"--bg #111827, --text #f9fafb, --muted #9ca3af; keep --accent.\"","checks":["r1"]},{"title":"Extras","why":"The AI adds a .dark toggle class, new variables or !important.","fix":"Add: \"No toggle, no new variables, no !important.\"","checks":["r2"]},{"title":"The whole stylesheet back","why":"The AI reprints the file with the block added and explains it.","fix":"Add: \"Return only the new block, no text.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Uses the media query","patterns":["prefers-color-scheme","media"]},{"label":"Gives the colors","patterns":["#111827","#f9fafb","#9ca3af"]},{"label":"Keeps the accent","patterns":["accent"]},{"label":"Uses the existing variables","patterns":["variables","custom properties",":root"]},{"label":"Asks for only the block","patterns":["only the (new )?block","nothing else","no !important"]}],"hint":"Good dark mode here is a small change, because the variables already exist. Tell the AI to only swap them, the exact colors and what not to add.","rubricLabels":["Is a single @media (prefers-color-scheme: dark) block that sets the variables on :root","Sets --bg: #111827, --text: #f9fafb and --muted: #9ca3af, and does not change --accent","Contains nothing else: no other selectors or rules, no new variables, no toggle class and no !important"]}