How to Create a Theme Switcher With HTML & CSS

How to Create a Theme Switcher With HTML & CSS

Kevin Powell via YouTube Direct link

- Styling the color theme picker

5 of 10

5 of 10

- Styling the color theme picker

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

How to Create a Theme Switcher With HTML & CSS

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - What we’re starting with
  3. 3 - Setting up the color theme selector
  4. 4 - Hiding the labels
  5. 5 - Styling the color theme picker
  6. 6 - Adding functionality with :has
  7. 7 - Using localStorage to remember the users choice
  8. 8 - Adding a fallback for when there is no :has support
  9. 9 I should have made separate selectors here, as this won't work in Firefox - see codepen in description for a working version
  10. 10 Because I moved this here, the theme should have been changed to activeTheme - see codepen in description for a working version

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.