Keep dark mode switch CSS navigating to other pages

Question

I have this simple code to turn a webpage into dark/light mode. It works fine on the page you are, but if I navigate to another page or refresh the page, mode resets to default (light). How do I make it remember to stay in the same mode I choose? Here is my simple code, I switch from one CSS to another.

BUTTON

<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;" onclick="darkswitchoff()"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" onclick="darkswitchoon()"></i>

SCRIPT

<script>
$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});
</script>

<script>
function darkswitchoff() {
    document.getElementById('mainstylesheet').href='/assets/css/main.css';
}

function darkswitchoon() {
    document.getElementById('mainstylesheet').href='/assets/css/main-dark.css';
}
</script>

Answer 1

Below you have all the code, unfortunately, it will not work here so I am giving a link to the working version dark-mode

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

@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;
}
a:hover, a: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;
}
.theme-switch input {
  display: none;
}
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}
.theme-switch-wrapper 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;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #66bb6a;
}
input:checked + .slider:before {
  transform: translateX(26px);
}

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

<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>

Answer 2

You need to "store" the state throughout the app. One way to do that without going through the hassle of using additional libraries is by using cookies.

<script>
document.cookie = "isDark=true";
</script>

You can later read that value and use dark mode. Keep in mind, cookies are stored as a string. If you're using cookies to only store if the user has dark mode enabled you'd do something like:

<script>
if(document.cookie){
//Code to Enable Dark Mode
}
</script>

A better way to deal with this would be to use a library like Redux and use it's powerful "store" which lets you store different kinds of data for the lifecycle of the app.

Answer 3

You should save this setting either in a Cookie or in localStorage. If the Cookie is set or you find the setting in localStorage, you load the dark-mode stylesheet.