<body>
  <header aria-label="Site header" id="header" role="banner">
    <div class="container">
      <div class="header">
        <h1>My site</h1>
        <div class="switch-wrapper">
          <label class="switch" for="checkbox">
            <input type="checkbox" id="checkbox"/>
            <div class="slider round"></div>
          </label>
        </div>
      </div>
    </div>

  </header>
  <div class="container">
    <section class="main" id="main">
      <main aria-label="Site main content" class="content" id="content" role="main">
       <p>Illo eligendi quam laboris placeat vestibulum. Accusantium mus? Nemo, sociosqu? Felis diamlorem, a parturient aenean etiam, donec animi, fames voluptatum porttitor feugiat sociosqu facere! Cillum, non, repudiandae ex, dis tincidunt condimentum officia natus possimus. Pretium ea veritatis at mattis. Nisi mi dolorem! Wisi varius? Sollicitudin, eos vivamus lacinia. Adipisci totam.</p>
      </main>

    </section>
  </div>
  </body>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

/*  Variable decleration for normal/light mode */
:root {
  --color-background: #f0f0f0;
  --color-header: rgb(14, 33, 141);
  --color-header-text: #aecafa;
  --color-text: #2c0000;
  --color-card-bg: #fff;
  --color-link: rgb(255, 0, 0);
}

/* Variable decleration for dark mode */

[data-theme="dark"] {
  --color-background: #1a1a1a;
  --color-header: #aecafa;
  --color-header-text: 0e218d;
  --color-text: #d3d3d3;
  --color-card-bg: #435561;
  --color-link: #24ce24;
}

body {
  background: var(--color-background);
  font-family: "Poppins", sans-serif;
  margin:unset;
  
}

.container {
  width: 900px;
  max-width: 1280px;
  margin: auto;
  padding:0 30px;
}

a {
  color: var(--color-link);
}

p,
span,
.node__submitted {
  color: var(--color-text);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: var(--color-header);
}

.header a,
h1{
  color: var(--color-header-text);
  text-decoration: none;
  font-weight: bold;
}

.region-navigation {
  display: flex;
  justify-content: center;
}

ul.menu {
  display: flex;
  justify-content: center;
}

ul.menu li {
  margin-right: 30px;
}

.switch-wrapper {
  display: flex;
  align-items: center;
}

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

.switch input {
  display: none;
}

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

.slider:before {
  background-color: rgb(255, 196, 0);
  bottom: 4px;
  content: url("sunny-day.svg");
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}

input:checked + .slider {
  background-color: rgb(36, 36, 36);
}

input:checked + .slider:before {
  transform: translateX(26px);
  content: url("night.svg");
  background-color: rgb(59, 116, 223);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.site-logo img {
  width: 100px;
}

.header.region {
  padding: 5px;
}

.header.region-branding {
  flex: 0 1 5%;
}

.region-branding {
  display: flex;
  align-items: center;
  color:white;
}

.header.region-navigation {
  flex: 0 1 80%;
}

.header.region-search {
  flex: 0 1 15%;
}

.region.block-region {
  padding: 15px;
}

.featured {
  padding: 40px 20px;
}

.main {
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
}

.main.content {
  flex: 0 1 65%;
}

const toggleSwitch = document.querySelector(
        '.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(e) {
        if (e.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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.