Styling a checkbox as darkmode toggle

Dominik — Sun, 16 Jan 2022 10:43:41 +0000

In the first part, we created a checkbox which has the ability to switch our website in darkmode.
In short, we introduced colors, saved in a central SCSS file. With these colors, we created two themes. A dark and a light one. These themes saved the SCSS values as CSS variables.
The checkbox then just switches between the two themes and the variables changing.

Now we want to throw some CSS at our checkbox to make it fun to engage with it. (Nobody wants to click on a small checkbox on their phones)

So we start with HTML structure of the switch like this:

<label class="switch">
  <input type="checkbox" name="theme_switch">
  <span class="slider"></span>
</label>

Now we do a little position and hide the default checkbox:

.switch {
  position: relative;
  display: inline-block;
  width: 68px;
  height: 38px;
  margin: 5px;
}

// hide checkbox
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

After that, we style the outside of the slider:

// outside
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

For the slider element, we use the pseudo-element :before of the slider span.
You can use a normal transition, but I like a slide rubber band animation at the slider. For this, it's best to use a cubic-bezier function. To make this all work, two animations have to be created. One for each direction to slide in. These animations together with the bezier function can be used by the animation property.

So we can style it as follows:

@keyframes going-dark {
  100% {
    -webkit-transform: translateX(28px);
  }
}

@keyframes going-light {
  0% {
    -webkit-transform: translateX(28px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

// slider in light state
.slider:before {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  left: 8px;
  bottom: 7px;
  background-color: white;
  border-radius: 50%;
  -webkit-animation: going-light 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) normal;
  -webkit-transition: 0.4s;
  animation: going-light 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) normal;
  transition: 0.4s;
}

// slider in dark state
input:checked + .slider:before {
  background-color: white;
  -webkit-animation: going-dark 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) forwards;
  -webkit-transition: all 0.4s;
  animation: going-dark 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) forwards;
  transition: all 0.4s;
}

Throw it all together, and you should be able to see something like this:

Adding a dark mode to your website using SCSS

Dominik — Thu, 28 Oct 2021 09:20:02 +0000

Most developers are using and loving it for years. After the release of iOS 13 it was introduced to people outside the development bubble.
The ✨dark mode✨.

For a long time I wanted my own website to feature a dark mode. So I started gathering my own requirements for that feature.

It should be working with my current setup of using SCSS and the colors defined within it. Also, the site should detect the preferred color-scheme and initialize that way. Lastly, you should always be able to switch the color-scheme independent of your preferred scheme.

So let's get started:

Step 1: Creating color-schemes

In my setup, the colors are already defined in a single SCSS file like this. All the other files are referencing these colors by name.

$onyx: #404040;
$cultured: #f5f5f5;
...

Since these colors are static, we need to transform them into CSS variables which are globally accessible. This way we can switch out the value of the colors which are referenced.

// creating a light and a dark theme on html level
html[data-theme="light"] {
  --color-text: #{$onyx};
  --color-background: #{$cultured};
}

html[data-theme="dark"] {
  --color-text: #{$cultured};
  --color-background: #{$onyx};
}

You can see in the light theme, we are using the dark text-color with a light background. And it is reversed in the dark theme.

The last step to set up the color-scheme is to reference the CSS variables where they are needed.

color: var(--color-text);
background: var(--color-background);

Now we need to add this data-theme attribute used in the scheme definition to the html tag.

Step 2: Add the attribute

To add the attribute we can use this short JS line.

document.documentElement.setAttribute('data-theme', 'dark');

With only this line, we would always be seeing the dark theme.

But we can dynamically set the attribute based on this checkbox.

<input type="checkbox" name="theme_switch"/>

// switch theme if checkbox is engaged
document.querySelector('input[name=theme_switch]')
    .addEventListener('change', (cb) => {
      document.documentElement.setAttribute(
        'data-theme',
        cb.target.checked ? 'dark' : 'light'
      );

Now, the checkbox actually switches the data-theme attribute. And the attribute switches the CSS variables.

Step 3: Initialize with the preferred theme

The final step is to initialize the data-theme during the first load with the preferred theme.
To find out which theme is preferred by the user, we can use the following condition:

window.matchMedia('(prefers-color-scheme: dark)').matches

This returns true if the preferred theme is dark.
Now we add all together:

let checkbox = document.querySelector('input[name=theme_switch]');

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
  checkbox.checked = true;
} else {
  document.documentElement.setAttribute('data-theme', 'light');
  checkbox.checked = false;
}

// switch theme if checkbox is engaged
checkbox.addEventListener('change', (cb) => {
  document.documentElement.setAttribute(
    'data-theme',
    cb.target.checked ? 'dark' : 'light'
  );
});

Final Feature