<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.