component

Theme Modes

Swap between light and dark mode.

This is controller by the data attribute data-theme witch could be light or dark. By default the [data-theme] applies basics stlyes like color, background-color and transition to its element. The variables comes from the root <html> element and by swaping from light to dark mode, it will only change the values of those variables:

    <section data-theme="light" class="module fold is-rounded-sm">
      <div class="module__wrapper">
        <!-- heading -->
        <div class="heading">
            <h2 class="heading__title">
                Lorem ipsum dolor sit amet consectetur adipiscing
            </h2>
            <p class="heading__subtitle">
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur
                sint occaecat cupidatat non proident sunt
            </p>
        </div>
      </div>
    </section>

Lorem ipsum dolor sit amet consectetur adipiscing

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt

JavaScript:

  <script type='application/x-suppress'>
    ( () => {
      const modeHandler = document.querySelector('[data-theme]')
      const trigger     = document.getElementById('.switch')

      const modeToggler = () => modeHandler.dataset.theme = modeHandler.dataset.theme === 'light' ? 'dark' : 'light'

      if( trigger ) trigger.onclick = modeToggler
    } )();
  </script>

Variables

From <html> root element:

  :root {
    --color-contrast--lower: var(--color-primary--10);
    --color-contrast--low: var(--color-primary--40);
    --color-contrast--medium: var(--color-primary--60);
    --color-contrast--high: var(--color-primary);
    --color-text--link: var(--color-accent);
    --color-theme--background: var(--color-white);
    --theme-mode-transition: .3s;
  }

Basic data-theme rules set:

  [data-theme] {
    color           : var(--color-contrast--medium);
    background-color: var(--color-theme--background);
    transition      : var(--theme-mode-transition);
  }

When dark mode is set:

  [data-theme="dark"] {
    --color-contrast--lower  : var(--color-contrast-light);
    --color-contrast--medium : var(--color-contrast-light-lower);
    --color-contrast--high   : var(--color-contrast-lighter);
    --color-theme--background: var(--color-contrast-dark);
  }