Wednesday March 24, 2021 By David Quintanilla
How to Build a Simple Theme Switcher With the CSS Checkbox Hack

On this tutorial, you’ll discover ways to create a CSS-only theme switcher by benefiting from the “CSS checkbox hack method” and CSS variables.

Prepared for an additional CSS problem?

Be aware: This tutorial assumes that you just’re aware of this specific CSS method together with superior CSS selectors (e.g. general sibling combinator). In the event you haven’t heard of those earlier than, or want a refresher, take a look at the assets on the finish of this tutorial.

Our CSS Theme Switcher

Right here’s the theme switcher that we’re going to create throughout this tutorial:

Click on on any of the colours on the high proper nook to see how the web page look adjustments. You too can use the arrow keys of your keyboard to change shade schemes.

1. Start With the HTML Markup

We’ll begin with eight radio buttons that may signify the obtainable theme colours. By default, the primary radio button will likely be checked.

Then, we’ll outline a wrapper component that may management the web page colours. Inside it, we’ll place:

  • The related labels for these radio buttons and
  • the web page’s principal content material. This web page will current just a few issues about 🐧🐧.

Right here’s the web page construction:

2. Outline Some Primary Kinds

As typical, we’ll proceed with some widespread reset types.

Most significantly, take note of the next issues:

  • We’ll use customized properties to outline eight totally different shade schemes. Every scheme will embrace two shade definitions that may signify the web page colours for a particular theme.
  • We’ll visually disguise the radio buttons by shifting them off-screen. We’ll give them place: mounted as a result of, within the format, the colour palette ought to stay mounted as we scroll. Consider, that if we give them place: absolute, every time we click on on a theme shade, the browser will bounce to the highest of the web page.

Listed below are the reset types:

3. Set the Principal Kinds

Shifting ahead, we’ll arrange the principle types.

Most significantly:

  • As described above, the colour palette will all the time keep within the high proper nook as we scroll.
  • Every label/theme shade will appear to be a circle, and its shade will depend upon the worth of the *-bg-color CSS variable of the associated shade scheme.
  • We’ll add a little bit of transitioning when the web page colours change.

Listed below are the essential types:

4. Checkbox Hack: Swap Between Themes

Now for the attention-grabbing half! Every time a label/theme shade is clicked (i.e. turns into energetic), the next issues will occur:

  • The ::earlier than pseudo-element of the energetic label will seem. Moreover, its shade will depend upon the worth of the *-text-color CSS variable of the associated shade scheme.

The active color theme

  • The web page colours will easily change based mostly on the energetic shade scheme.

Listed below are the associated types:

It’d take you a while to know how the aforementioned types work. If that is so, the browser inspector together with the opposite comparable tutorials are your finest buddy!


That’s it, of us! On this brief tutorial, we mixed the facility of the “CSS checkbox hack method” and CSS variables to construct a web page with dynamic shade themes. Hopefully, you loved this train and also you’ll attempt it in one in all your upcoming initiatives.

Right here’s a reminder of what we constructed:

In the event you additionally wish to construct a extra superior theme swap that persists the chosen theme shade on web page load, you’ll want to learn this tutorial.

Have you ever ever developed  one thing comparable with pure CSS for a undertaking? Tell us through social media. As all the time, thanks for studying!

Additional Studying

Take a look at these tutorials to be taught extra about issues you’ll be able to construct with the CSS checkbox hack method:

Source link