CSS Only Theme Switcher

This is a website theme switcher made using CSS only. This is the radio button–version, allowing you to use more than two themes! Here I use three, but you can create as many as you'd like.

> Two theme-version

This version doesn't use any JavaScript to store your theme preference. When you reload the page, you'll always get the default theme.

Limitations using this method

Despite being dubbed the "unlimited" version, using multiple radio buttons instead of a single checkbox has its limitations.

For accessibility reasons—when styling the focused state—each switch label must be adjacent to its radio button:

<input type="radio" name="theme-switch" id="theme-switch1">
<label for="theme-switch1">Light</label>

This way, we can use the following CSS rule to set a style when the user has focus on a specific radio button:

.theme-switch:focus + .switch-label {
  /* style properties */
}

This, however, means that we won't be able to use theme-specific styling for our switch labels, since they have to be placed outside of our themed container (#page). You will still have access to the default theme's colors though, since these are declared on :root.