medium JavaScript ALL 3

Dark / Light Theme Toggle

The Brief

Add a dark-mode toggle to a simple page. Clicking the button switches between light and dark themes. Use CSS custom properties (variables) so the entire palette swaps with one attribute change — no rewriting individual rules in JS.

Acceptance Criteria

Tap a criterion to mark it off as you work. Tap a category header to expand or collapse.

1 A <div class="container"> wrapping the page content

2 An <h1> heading and a <p> explanation paragraph

3 A <button id="theme-toggle"> to flip themes

4 Define --bg, --text, --accent on :root for the LIGHT theme

5 Light values: --bg: #ffffff, --text: #111827, --accent: #2563eb

6 Override the same three variables under [data-theme="dark"] selector

7 Dark values: --bg: #0f172a, --text: #e2e8f0, --accent: #38bdf8

8 Use var(--bg), var(--text), var(--accent) in body and button styles

9 Add a smooth transition on background and color so theme changes animate

10 On button click, read the current data-theme from document.documentElement

11 Toggle the value between "light" and "dark"

12 Use setAttribute / getAttribute (not classes)

💡 Hints 0 / 3

Guest Mode Attempt freely, or log in to earn EXP & CodeCoins.

index.html

Live Preview