https://credej.github.io/components/themes.js

1      
2      // helper functions to toggle dark mode
3      function enableDarkMode() {
4         document.body.classList.add('dark-mode');
5         localStorage.setItem('theme', 'dark');
6      }
7      function disableDarkMode() {
8         document.body.classList.remove('dark-mode');
9         localStorage.setItem('theme', 'light');
10      }
11
12      // determines a new users dark mode preferences
13      function detectColorScheme() {
14
15         // default to the light theme
16         let theme = 'light';
17
18         // check localStorage for a saved 'theme' variable. if it's there, the user has visited before, so apply the necessary theme choices
19         if (localStorage.getItem('theme')) {
20            theme = localStorage.getItem('theme');
21         }
22
23         // if it's not there, check to see if the user has applied dark mode preferences themselves in the browser
24         else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
25            theme = 'dark';
26         }
27
28         // if there is no preference set, the default of light will be used. apply accordingly
29         theme === 'dark' ? enableDarkMode() : disableDarkMode();
30      }
31
32      // run on page load
33      detectColorScheme();
34
35      // add event listener to the dark mode button toggle
36      document.getElementById('navbar-theme-toggle').addEventListener('click', () => {
37         // on click, check localStorage for the dark mode value, use to apply the opposite of what's saved
38         localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
39      });