<\/p>\n\n\n\n
\n With the growing popularity of dark mode in modern web interfaces, it’s become increasingly important for developers to implement this feature. Whether you’re a seasoned professional or just starting with web development, this guide will walk you through the process of creating a toggle switch for dark and light themes in JavaScript.\n<\/p>\n\n
\n Before we start writing our JavaScript code, we need to check the user’s preferred colour scheme. We can do this using the \n This code checks the user’s operating system colour scheme preference and adds a class ( \n Next, we’ll need to define our colour schemes in CSS. We’ll create two classes: one for our light theme and another for our dark theme. \n<\/p>\n\n \n You’ll likely have more style changes, but this example serves to illustrate the idea. Make sure to import your CSS file into your HTML document.\n<\/p>\n\n \n Finally, we’ll add a button to our HTML that allows users to switch between our dark and light themes. \n<\/p>\n\n \n We can then add an event listener to this button in JavaScript, which will switch the theme whenever it’s clicked.\n<\/p>\n\n \n The above code doesn’t remember the user’s choice, so each time the user revisits your website, the colour scheme will reset to the operating system’s preference. If you want to store the user’s choice, you can use the \n In this enhanced version, the user’s theme choice is stored in local storage and checked on page load. If there’s no saved choice, the code defaults to the operating system’s preference. Then, each time the user changes the theme, their choice is saved to local storage.\n<\/p>\n \n That’s all there is to it! With a bit of JavaScript and CSS, you can provide a more comfortable and personalised user experience on your website. Whether your users prefer dark or light mode, they’ll appreciate the option to choose.\n<\/p>\n","protected":false},"excerpt":{"rendered":"window.matchMedia()<\/code> method.\n<\/p>\n\n\nconst prefersDarkScheme = window.matchMedia(\"(prefers-colour-scheme: dark)\").matches;\n\nif (prefersDarkScheme) {\n document.body.classList.add(\"dark-theme\");\n} else {\n document.body.classList.add(\"light-theme\");\n}\n<\/code><\/pre>\n\ndark-theme<\/code> or light-theme<\/code>) to the body of your document accordingly.\n<\/p>\n\nStep 2: Loading the Appropriate Styles<\/h2>\n\n
\n\/* Default to light theme *\/\nbody {\n background-colour: white;\n colour: black;\n}\n\n\/* Dark theme *\/\nbody.dark-theme {\n background-colour: black;\n colour: white;\n}\n\n\/* Light theme *\/\nbody.light-theme {\n background-colour: white;\n colour: black;\n}\n<\/code><\/pre>\n\nStep 3: Adding a Toggle Switch<\/h2>\n\n
\n<button id=\"theme-toggle\">Toggle theme<\/button>\n<\/code><\/pre>\n\n\nconst themeToggle = document.getElementById(\"theme-toggle\");\n\nthemeToggle.addEventListener(\"click\", function() {\n const currentTheme = document.body.classList.contains(\"dark-theme\") ? \"dark\" : \"light\";\n \n \/\/ Switch from light to dark or from dark to light\n if (currentTheme === \"dark\") {\n document.body.classList.replace(\"dark-theme\", \"light-theme\");\n } else {\n document.body.classList.replace(\"light-theme\", \"dark-theme\");\n }\n});\n<\/code><\/pre>\n\nRemembering the User’s Choice<\/h2>\n\n
localStorage<\/code> object:\n<\/p>\n\n\n\/\/ Check local storage then system preference for theme\nlet currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : (window.matchMedia(\"(prefers-colour-scheme: dark)\").matches ? \"dark\" : \"light\");\n\n\/\/ Set the body class based on the current theme\ndocument.body.classList.add(currentTheme + \"-theme\");\n\n\/\/ Click event handler\nthemeToggle.addEventListener(\"click\", function() {\n currentTheme = document.body.classList.contains(\"dark-theme\") ? \"dark\" : \"light\";\n \n \/\/ Switch from light to dark or from dark to light\n if (currentTheme === \"dark\") {\n document.body.classList.replace(\"dark-theme\", \"light-theme\");\n currentTheme = \"light\";\n } else {\n document.body.classList.replace(\"light-theme\", \"dark-theme\");\n currentTheme = \"dark\";\n }\n\n \/\/ Save the current theme in local storage\n localStorage.setItem('theme', currentTheme);\n});\n<\/code><\/pre>\n\n