Theme Switch

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Code

HTML CSS SCSS JS

// HTML ELEMENT REQUIRES data-theme="light" AS DEFAULT
<html data-theme="light">


// SHOULD BE PLACED IN THE FOOTER
<label class="theme-switch" for="checkbox">
  <input type="checkbox" id="checkbox" />
  <div class="theme-toggle"></div>
</label>

.theme-switch {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  border: 0.2rem solid #000000;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.theme-switch input {
  display: none;
}

.theme-toggle {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 360ms ease;
  background-image: linear-gradient(40deg, #f2994a 0%, #f2c94c 100%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.theme-toggle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #e8cbc0 0%, #636fa4 100%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 360ms;
  z-index: -1;
}

.theme-toggle:after {
  content: "";
  position: absolute;
  top: -3.33%;
  right: -15%;
  width: 0;
  height: 0;
  transition: all 360ms ease;
  background: #000000;
  border-radius: 50%;
}

input:checked + .theme-toggle:before {
  opacity: 1;
}

input:checked + .theme-toggle:after {
  width: 90%;
  height: 90%;
}

.theme-switch {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  border: 0.2rem solid #000000;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.theme-switch input {
  display: none;
}

.theme-toggle {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 360ms ease;
  background-image: linear-gradient(40deg, #f2994a 0%, #f2c94c 100%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #e8cbc0 0%, #636fa4 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 360ms;
    z-index: -1;
  }

  &:after {
    content: "";
    position: absolute;
    top: -3.33%;
    right: -15%;
    width: 0;
    height: 0;
    transition: all 360ms ease;
    background: #000000;
    border-radius: 50%;
  }
}

input:checked + .theme-toggle:before {
  opacity: 1;
}
input:checked + .theme-toggle:after {
  width: 90%;
  height: 90%;
}

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
const dataTheme = 'data-theme';
if (currentTheme) {
    document.documentElement.setAttribute(dataTheme, currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute(dataTheme, 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {
        document.documentElement.setAttribute(dataTheme, 'light');
        localStorage.setItem('theme', 'light');
    }
}

toggleSwitch.addEventListener('change', switchTheme, false);

Design Files

Figma

Use Case

The theme switch is used to switch between light and dark mode.

It is currently places in the footer and uses local storage to save the users preference so when they change pages or come back to the site it will be show what they last set.

This works the same way as the brand switch.\

Requirements

Component Options

There are no options for this component.