medium JavaScript & CSS ALL 3

Light/Dark Mode Toggle

The Brief

Build a page with a button that toggles between light and dark mode. Use CSS custom properties (variables) to define your colours, then swap them out by adding a class to the body when the button is clicked. Include at least a heading, some body text, and a card-like element so the theme change is visible.

Acceptance Criteria

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

1 Page has a button with id theme-toggle

2 Page has visible content (heading, paragraph, and a card or box)

3 CSS uses custom properties (variables) defined on :root

4 A .dark class on body overrides the variables to dark values

5 Smooth transition when colours change (transition property)

6 Clicking the toggle adds/removes the .dark class on body

7 Toggle button text changes between Light Mode and Dark Mode

💡 Hints 0 / 4

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

index.html

Live Preview