I really hope that you guys find this article useful. I also recommend these color palette generators: Coolors, Muzli Colors, and Color Space to generate the color codes for your themes. Reference website with multi-color theme: Alligator.io If you want to use an attribute to switch the theme instead of body class then replace the below line body.classList = theme Let theme = this.getAttribute('dd-theme') ( ('theme') = e.getAttribute('dd-theme') ? e.classList.add('active') : null ) Į.addEventListener('click', switchTheme) Set the theme from localStorage(if exist) || or set default light Javascript to activate/deactivate from multiple themes & localStorage /** Switch Theme **/
If your web project contains more then 2 themes then you can activate/deactivate the theme using the below code. ( theme = 'light' ? theme = 'dark' : theme = 'light') _toggler.addEventListener('click', toggleTheme) Let _toggler = document.querySelector('') Let available_themes = document.querySelectorAll('') Activate the current theme (using class) Javascript to toggle between light and dark theme & localStorage // Set the theme from localStorage(if exist) || or set default light
In this tutorial, we will learn how to change the theme from light(default) to dark and other custom color themes.
To create the color themes, we will use the CSS variables(for colors) and Javascript(to toggle and store the user preference). The color modes enhance the overall look and feel of the website from the UI perspective. In today's web, most of the popular websites have multiple(dark/light) color themes available. It is more essential to have a multiple(/dark/light) color theme of your website/blog to attract more people.