🎨 Path C: Checkbox + CSS (Pure CSS Approach)

This advanced technique uses a hidden checkbox with the general sibling combinator (~) . It's pure CSS magic—no JavaScript needed for the toggle! This elegant pattern showcases the power of CSS selectors.

✨ How It Works

The Magic: A hidden checkbox stores state (checked/unchecked). The label acts as a button. When checked, CSS uses the :checked pseudo-class with the ~ combinator to style ALL sibling elements!

1. Hidden Checkbox

<input type="checkbox" id="theme-toggle-checkbox" hidden>

This stores the state (checked = dark mode, unchecked = light mode)

2. Label as Button

<label for="theme-toggle-checkbox">Toggle</label>

Clicking the label checks/unchecks the checkbox—semantic HTML!

3. Sibling Combinator (~)

#theme-toggle-checkbox:checked ~ .container { --color: dark; }

When checkbox is :checked, select ALL following siblings (~) and change their CSS variables

/* The Complete Pattern */

/* Default: Light Theme (Tyrian Purple) */
.container {
  --background: hsla(307, 45%, 50%, 0.75);
  --foreground: hsla(50, 100%, 54%, 0.9);
}

/* When checkbox is checked: Dark Theme (Tyrian Indigo) */
#theme-toggle-checkbox:checked ~ .container {
  --background: hsla(213, 100%, 18%, 0.9999);
  --foreground: hsla(60, 60%, 49%, 0.9999);
}

/* Dynamic content with CSS variables! */
button:before {
  content: var(--toggle-shape);
}
🎓 Educational Value: This teaches advanced CSS selectors, semantic HTML, and creative problem-solving without JavaScript. It's elegant and maintainable!

Why This is Elegant

✅ Semantic

Checkbox represents binary state (light/dark) perfectly

✅ CSS-Only

Zero JavaScript required for the toggle mechanism

✅ Creative

Shows mastery of advanced CSS selectors and pseudo-classes

✅ Educational

Teaches power of CSS combinators and cascade

The Tyrian Color System

This demo uses Tyrian Purple (light mode) and Tyrian Indigo (dark mode)— historical colors from ancient Phoenician shellfish dye. Notice how HSL with transparency creates depth!

/* HSL: Hue, Saturation, Lightness, Alpha */

Purple Mode:
--background: hsla(307, 45%, 50%, 0.75);
    /* H:307° (magenta), S:45%, L:50%, A:75% */

Indigo Mode:
--background: hsla(213, 100%, 18%, 0.9999);
    /* H:213° (blue), S:100%, L:18%, A:99.99% */

Why HSL? Easy to create color variations by adjusting values!
🎨 Color Theory Lesson: Tyrian Purple symbolized royalty in ancient times. Here it represents the default "light" state. Tyrian Indigo (deep blue) provides excellent contrast for dark mode while maintaining the historical theme.

Inspect in DevTools!

Open DevTools (F12) and try these:

  1. Find <input id="theme-toggle-checkbox"> in Elements
  2. Watch it check/uncheck as you click the button above
  3. Inspect .tyrian-container and see CSS variables change
  4. Try adding: #theme-toggle-checkbox:checked ~ .tyrian-container { border: 10px solid red; }
  5. Experiment with your own HSL color values!

Try the toggle above again!

Notice how the symbol (◐/◑) changes using content: var(--toggle-shape)

Critical Thinking: Is this checkbox approach more elegant than JavaScript? Consider: semantic HTML, accessibility, maintainability, and teaching value. When would you choose this over Path A (CSS auto) or Path B (JavaScript)? Does the "CSS-only" constraint make you more creative or more limited?