Add dark mode by overriding your existing CSS variables

About this exercise

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.

Common mistakes when you ask AI for this

• Rewriting every rule. The AI often adds dark versions of body, .card and .button instead of just swapping the variables. Try: Say: "Only redefine the variables on :root inside one media block."
• Guessing the palette. The AI picks its own dark colors. Try: Give them: "--bg #111827, --text #f9fafb, --muted #9ca3af; keep --accent."
• Extras. The AI adds a .dark toggle class, new variables or !important. Try: Add: "No toggle, no new variables, no !important."
• The whole stylesheet back. The AI reprints the file with the block added and explains it. Try: Add: "Return only the new block, no text."

What a strong prompt includes

• Uses the media query
• Gives the colors
• Keeps the accent
• Uses the existing variables
• Asks for only the block

Practice this now ↑

Related exercises

• Add a cron line that matches the others in a crontab (Coding AI · Product managers)
• Add input checks to your number guessing game (Coding AI · High school students)
• Add input validation to a Java method with exact messages (Coding AI · Software developers)
• Add labels to a signup form without rewriting the page (Coding AI · High school students)
• Add mail-merge greetings for couples and missing names (Coding AI · Nonprofit staff)