Pure CSS Theme Selector

Select a theme: Light Pink Red Orange Blue Dark

Currently selected: Light Pink Red Orange Blue Dark

Form

Name

Favourite colour Pick a colour White Pink Red Orange Blue Black Something else

Favourite number

About

Radio buttons are placed at the same level as a wrapper element. Everything else in the page is in the wrapper:

<input type="radio" name="theme" class="theme" id="theme-light" checked="checked">
<input type="radio" name="theme" class="theme" id="theme-pink">
<input type="radio" name="theme" class="theme" id="theme-red">
<input type="radio" name="theme" class="theme" id="theme-orange">
<input type="radio" name="theme" class="theme" id="theme-blue">
<input type="radio" name="theme" class="theme" id="theme-dark">
<div class="wrapper">
...
</div>

Each theme selection button is linked to a radio button:

<label class="theme-button light" for="theme-light">Light</label>
<label class="theme-button pink" for="theme-pink">Pink</label>
<label class="theme-button red" for="theme-red">Red</label>
<label class="theme-button orange" for="theme-orange">Orange</label>
<label class="theme-button blue" for="theme-blue">Blue</label>
<label class="theme-button dark" for="theme-dark">Dark</label>

CSS selectors are used to style the wrapper based on which radio button is selected:

.wrapper {
    font: 1em sans-serif;
    min-height: calc(100vh - 4em);
    padding: 2em 4em;
    transition: background .5s, color .5s;
}

#theme-light:checked ~ .wrapper {
    color: #000;
    background: #fff;
}

#theme-pink:checked ~ .wrapper {
    background: #fde;
    color: #000;
}

#theme-red:checked ~ .wrapper {
    background: #fcc;
    color: #000;
}