CMS Developers

 <header class="">
    <div class="header-inner page-center flex">
      <h1>Dark Mode Demo</h1>
      <div class="theme-toggle flex">
        <label for="checkbox">
          <input type="checkbox" name="checkbox" class="theme-switch">
          <div class="slider round"></div>
        </label>
      </div>
    </div>
  </header>
  <main>
    <section class="page-center">
      <h2>Articles</h2>
      <div class="flex container">
        <article>
          <img src="https://fillmurray.com/300/305" alt="">
          <h4>Article Title</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur eaque perspiciatis voluptatem modi cum, enim consequuntur? Quasi assumenda tenetur, reprehenderit dignissimos, quam, esse excepturi voluptatum ad molestias ratione blanditiis.</p>
        </article>
        <article>
          <img src="https://fillmurray.com/300/300" alt="">
          <h4>Article Title</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum tenetur maxime nulla non dignissimos architecto ea voluptates, eum assumenda necessitatibus sit suscipit consequuntur? Voluptatem minus consequatur provident asperiores ullam totam.</p>
        </article>
        <article>
          <img src="https://fillmurray.com/300/304" alt="">
          <h4>Article Title</h4>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus praesentium deserunt non ad, voluptatibus error aliquam magni minima sit omnis impedit earum quidem asperiores explicabo? Fugiat temporibus explicabo nemo saepe.</p>
        </article>
      </div>
    </section>
  </main>
          
        

          
            @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");

:root {
  --light-color: #efefef;
  --medium-color: #6c6c6c;
  --mediumer-color: #d7d7d7;
  --dark-color: #484848;
}
[data-theme="dark"] {
  --darkest-color: rgba(0, 0, 0, 0.8);
  --darker-color: #6c6c6c;
  --dark-color: #484848;
  --medium-color: #efefef;
  --light-color: #f4f4f4;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: var(--light-color);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
h1,
h2 {
  color: var(--medium-color);
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.page-center {
  width: 1080px;
  max-width: 80%;
  margin: 0 auto;
}
header {
  width: 100vw;
  padding: 20px 0;
  background-color: var(--light-color);
  position: fixed;
  top: 0;
  transition: 200ms all ease-in-out;
}
.header-inner {
  border-bottom: 1px dashed var(--medium-color);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
main {
  display: block
}
main .container {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 32%;
  border-radius: 10px;
  -webkit-box-shadow: 1px 10px 10px 2px var(--mediumer-color);
  box-shadow: 1px 10px 10px 2px var(--mediumer-color);
}
article img {
  height: 300px;
}
article p,
article h4 {
  padding: 0 10px;
  letter-spacing: 0.5px;
}
/* Color Toggle */
.theme-toggle {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-toggle input {
  /* display:none; */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 0;
  position: relative;
  top: -10px;
  width: 60px;
  height: 50px;
  z-index: 100;
}

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

.slider:before {
  background-color: var(--light-color);
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #a4bfd4;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  transform: translateX(26px);
}

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

.slider.round:before {
  border-radius: 50%;
}
/* dark theme */
html[data-theme="dark"] body,
html[data-theme="dark"] header {
  background-color: var(--dark-color);
}
html[data-theme="dark"] h4,
html[data-theme="dark"] p {
  color: var(--light-color);
}
html[data-theme="dark"] article {
  -webkit-box-shadow: 1px 10px 10px 2px var(--darkest-color);
  box-shadow: 1px 10px 10px 2px var(--darkest-color);
}

@media (max-width: 767px) {
  article {
    width: 45%;
    margin-bottom: 50px;
  }
}
@media (max-width: 600px) {
  article {
    width: 100%;
    margin-bottom: 50px;
  }
}
@media (max-width: 500px) {
  header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   .theme-toggle {display: none}
}
          
        

          
            "use strict";
document.createElement("main");
var toggleSwitch = document.querySelector(
  '.theme-toggle input[type="checkbox"]'
);

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");
  }
}

var currentTheme = localStorage.getItem("theme")
  ? localStorage.getItem("theme")
  : null;

if (typeof currentTheme == "undefined") {
  console.log("theme not stored");

  if (matchMedia("(prefers-color-scheme: dark)").matches) {
    console.log("prefer dark");
    document.documentElement.setAttribute("data-theme", "dark");
    toggleSwitch.checked = true;
  } else if (matchMedia("(prefers-color-scheme: light)").matches) {
    console.log("prefers light");
    document.documentElement.setAttribute("data-theme", "light");
    toggleSwitch.checked = false;
  }
}

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

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

toggleSwitch.addEventListener("change", switchTheme, false); //get header height and add some distance to main

var header = document.querySelector("header");
var main = document.querySelector("header");

function space() {
  var headerHeight = header.clientHeight + "px";
  document.querySelector("main").style.marginTop = headerHeight;
  console.log(headerHeight);
}

window.addEventListener("load", space);
window.addEventListener("resize", space);

//# sourceMappingURL=scripts-min.js.map