0

I can't quite figure out how to save the selection for dark/light mode as a cookie.

Here is the webpage I am trying it on: https://schooloffish.info/index.html

Tried w3schools code for cookies but I can't get it to work. Any help is appreciated.

2 Answers2

0

Use document.cookie:

// inside your event listener on the dark mode toggle:
document.cookie = "darkMode=true";

You can then use a stock helper function like getCookie() to retrieve the value:

let darkMode = getCookie("darkMode");
Marcus
  • 21
  • 7
0

You can use localStorage with css variables for storing and switching theme. For example:

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

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      /* css variables */
      .dark {
         --bg: black;
         --fg: white;
      }

      .white {
         --bg: white;
         --fg: black;
      }

      body {
         /* use the variable */
         background-color: var(--bg);
         color: var(--fg);
      }

      button {
         /* use the variable */
         background-color: var(--bg);
         color: var(--fg);
         border-radius: 5px;
         border-style: dashed;
      }
   </style>
</head>

<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad at ipsum placeat maiores, fugiat neque sit, et
      consequatur, fuga libero magni porro saepe distinctio quibusdam sapiente praesentium earum assumenda id!</p>
   <button id='switch' onclick="switchTheme()">switch theme</button>
   <script>
      // setting theme when contents are loaded
      window.addEventListener('load', function () {
         var theme = localStorage.getItem('theme');
         // when first load, choose an initial theme
         if (theme === null || theme === undefined) {
            theme = 'light';
            localStorage.setItem('theme', theme);
         }
         // set theme
         var html = document.querySelector("html");
         // apply the variable
         html.classList.add(theme);
      })

      function switchTheme() {
         var theme = localStorage.getItem('theme');
         var html = document.querySelector('html');
         // choose new theme
         if (theme === 'dark') {
            new_theme = 'light';
         } else {
            new_theme = 'dark';
         }
         // remove previous class
         html.classList.remove(theme);
         // add new class
         html.classList.add(new_theme);
         // store theme
         localStorage.setItem('theme', new_theme);
      }
   </script>

</body>

</html>
SodaCris
  • 358
  • 4
  • 7
  • Thanks @SodaCris. I have never seen --bg or --fg used in CSS. In your script, when you use light and dark, do you mean the dark and white from the CSS file? "Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty." for ```html.classList.remove(theme);```. I believe it fails to run. –  Dec 05 '21 at 01:09
  • you might forgot the `addEventListener` part.. and I add some comments to make it easier to understand. – SodaCris Dec 05 '21 at 01:58