<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script> <script> // Add dark mode classes and elements' classes // newDarkClass - a name of a class with dark mode attributes // defaultClass - a class of an element a new class will be added to var darkClasses = [ { newDarkClass: 'bodyDark', defaultClass: 'body' }, { newDarkClass: 'h2_dark', defaultClass: 'h2' }, ]; // Listening to a switch and running a function on click document.getElementById("switch").addEventListener("click", darkSwitch); // checking if cookie exists var cookieState = Cookies.get('darkMode'); // First visit - cookieState is undefined // If cookie exists we are parsing it to get a boolean if (cookieState === undefined) { var isDarkmodeEnabled = false; } else { var isDarkmodeEnabled = JSON.parse(cookieState) }; // Cookie doesn't exist: darkMode = false // Cookie exists: darkMode = true/false var darkMode = isDarkmodeEnabled; // Adding classes on page load if darkmode is enabled window.onload = addClassesOnLoad(); // Changing darkMode state and adding or removing classes function darkSwitch() { // Setting darkMode to its opposite value darkMode = !darkMode; if (darkMode === true) { // Looping through an array and deleting classes darkClasses.forEach(item => { var element = document.querySelectorAll(`.${item.defaultClass}`) element.forEach(h => h.classList.add(item.newDarkClass)) }); } else { // Looping through an array and deleting classes darkClasses.forEach(item => { var element = document.querySelectorAll(`.${item.defaultClass}`) element.forEach(h => h.classList.remove(item.newDarkClass)) }); }; // Saving darkMode state to the cookie Cookies.set('darkMode', darkMode); } // Adding classes on page load if darkmode is enabled // function addClassesOnLoad() { if (darkMode === true) { // Changing switch state document.getElementById("switch").checked = true; darkClasses.forEach(item => { var element = document.querySelectorAll(`.${item.defaultClass}`) element.forEach(h => h.classList.add(item.newDarkClass)) }); }; } </script> <style> /* DEFINE DARK MODE CLASSES HERE */ </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter