HubSpot CMS

Dark Mode Demo

Demonstration on how one can implement a dark mode on a site using css variables to easily update colors and localstorage to save users preference

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

3 Recommendations

View on:

GitHub

HTML + HUBL
          
             <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>
          
        
CSS
          
            @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}
}
          
        
JS
          
            "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

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

Dark Mode demo


Your Documentation This is just simple demonstration on how one can implement a dark mode on a site. Using css variables makes it easy to create a color palette which can then be updated with a different color scheme After selecting a theme, the js will use local storage to save the settings.

 
3 Recommendations

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co