Lehigh Clutch Style Guide

Dark Mode Toggle Switch 

<div class="dark-toggle">
    <div class="moon">
        <span class="sr-only">Dark mode toggle on and off switch</span>
    </div>
</div>
 
<div class="dark-toggle">
  <div class="moon">
    <span class="sr-only">Dark mode toggle on and off switch</span>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    var Drupal = Drupal || {};
(function () {
  // Check if the light mode is set in local storage
  var isLightMode = localStorage.getItem('isLightMode');

  // If the light mode is set in local storage, apply the saved state
  if (isLightMode === 'true') {
    document.body.classList.add('color-scheme-light');
    document.body.classList.remove('color-scheme-dark');
    document.querySelector('.moon').classList.add('sun');
    document.querySelector('.dark-toggle').classList.add('day');
  } else if (isLightMode === 'false') {
    document.body.classList.remove('color-scheme-light');
    document.body.classList.add('color-scheme-dark');
    document.querySelector('.moon').classList.remove('sun');
    document.querySelector('.dark-toggle').classList.remove('day');
  }

  // Handle click event on toggle button
  document.querySelector('.dark-toggle').addEventListener('click', function () {
    document.body.classList.toggle('color-scheme-light');
    document.body.classList.toggle('color-scheme-dark');
    document.querySelector('.moon').classList.toggle('sun');
    document.querySelector('.dark-toggle').classList.toggle('day');

    // Save the state of the light mode to local storage
    var isLightMode = document.body.classList.contains('color-scheme-light');
    localStorage.setItem('isLightMode', isLightMode);
  });

})(Drupal);
  • URL: /components/raw/dark_mode_toggle/dark_mode_toggle.js
  • Filesystem Path: bits/04-components/dark_mode_toggle/dark_mode_toggle.js
  • Size: 1.4 KB
  • Content: 
    :root {
--toggleHeight: 16em;
  --toggleWidth: 30em;
  --toggleBtnRadius: 10em;

  --bgColor--night: #423966;
  --toggleBtn-bgColor--night: var(--bgColor--night);
  --mooncolor: #D9FBFF;
  --bgColor--day: #9ee3fb;
  --toggleBtn-bgColor--day: var(--bgColor--day);
}

body {
  transition: background-color .2s ease-in-out;
}

.dark-toggle {
  /*change size of toggle with font-size*/
  font-size: 2px;
  margin: $space_two 0 0 0;
  position: relative;
  height: var(--toggleHeight);
  width: var(--toggleWidth);
  border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background: var(--bgColor--night);


  &.day {
    background: #FFBF71;
  }

  .moon {
    position: absolute;
    display: block;
    border-radius: 50%;
    transition: all 400ms ease-in-out;

    top: 3em;
    left: 3em;
    transform: rotate(-75deg);
    width: var(--toggleBtnRadius);
    height: var(--toggleBtnRadius);
    background: var(--bgColor--night);
    box-shadow:
      3em 2.5em 0 0em var(--mooncolor) inset,
      rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
      rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
      rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
      rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
      rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
      rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
      rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
      rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
  }

  .sun {
    top: 4.5em;
    left: 18em;
    transform: rotate(0deg);
    width: 7em;
    height: 7em;
    background: #fff;
    box-shadow: 3em 3em 0 5em #fff inset,
      0 -5em 0 -2.7em #fff,
      3.5em -3.5em 0 -3em #fff,
      5em 0 0 -2.7em #fff,
      3.5em 3.5em 0 -3em #fff,
      0 5em 0 -2.7em #fff,
      -3.5em 3.5em 0 -3em #fff,
      -5em 0 0 -2.7em #fff,
      -3.5em -3.5em 0 -3em #fff;
  }
}
  • URL: /components/raw/dark_mode_toggle/dark_mode_toggle.scss
  • Filesystem Path: bits/04-components/dark_mode_toggle/dark_mode_toggle.scss
  • Size: 1.8 KB

Toggle the dark mode on and off.