Dark/Light mode

by tomik23

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dark/Light mode switch</title>
  </head>

  <body>
    <nav>
      <div class="theme-switch-wrapper">
        <label class="theme-switch" for="checkbox">
          <input type="checkbox" id="checkbox" />
          <div class="slider round"></div>
        </label>
      </div>
    </nav>

    <section>
      <article class="post">
        <h1>Lorem Ipsum</h1>
        <p class="post-meta">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
          velit...</p>

        <p><strong>Lorem ipsum</strong> dolor sit amet consectetur, adipisicing elit. Suscipit voluptatum repellat
          praesentium impedit,
          earum cumque recusandae asperiores? <strong>Ullam</strong>, qui at. Ex aliquam ratione suscipit. Soluta
          voluptate consectetur quae est! Veniam.</p>

        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti, architecto. Ducimus molestiae officia dolor
          voluptatem at, sequi debitis odit placeat rerum nisi quidem laudantium nobis in accusamus aut culpa obcaecati!
          Lorem ipsum dolor, <strong>sit amet consectetur</strong> adipisicing elit. Cupiditate provident, aliquid
          mollitia vero quisquam
          eligendi enim, eum incidunt dolorem ipsa voluptatem pariatur cum quis, repellat fugiat. In illo necessitatibus
          quasi!</p>
        <a href="#">Czytaj więcej</a>
      </article>
    </section>
  </body>

</html>

SCSS

@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One");

:root {
  --primary-color: #24242b;
  --secondary-color: #433055;
  --font-color: #3f3f3f;
  --bg-color: #f3f3f3;
  --heading-color: #2a2a23;
}

html[data-theme="dark"] {
  --primary-color: #f89898;
  --secondary-color: #8894b3;
  --font-color: #d8d8f6;
  --bg-color: #242424;
  --heading-color: #818cab;
}

body {
  font-family: "Lato", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 900px;
  margin: 0 auto;
  transition: background 200ms ease-in;
  padding: 0 30px;
  font-size: calc(1rem + 0.25vh);
}

h1 {
  color: var(--heading-color);
  font-family: "Lato", serif;
  font-size: 3rem;
  margin-bottom: 1vh;
}

p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 5px;
  transition: border-bottom 1s;
  font-weight: bold;

  &:hover,
  &:focus {
    border-bottom: 3px solid currentColor;
  }
}

section {
  margin: 0 auto;
}

.post-meta {
  font-size: 1rem;
  font-style: italic;
  display: block;
  margin-bottom: 4vh;
  color: var(--secondary-color);
}

nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;

  input {
    display: none;
  }

  &-wrapper {
    display: flex;
    align-items: center;

    em {
      margin-left: 10px;
      font-size: 1rem;
    }
  }
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;

  &:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 26px;
  }

  &.round {
    border-radius: 34px;

    &:before {
      border-radius: 50%;
    }
  }
}

input:checked {
  &+.slider {
   ...

JavaScript

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);

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

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

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