Simple Theme Switch

April 28, 2024

This is a simple theme switch using just HTML, CSS, and JavaScript. To switch a theme, all we will do is change a class on the body tag. First, add the class "light" to the body tag and then create a button that will be used to switch the theme from light to dark and back when clicked.

After that, create custom CSS properties for each theme and use those properties throughout the app.

Lastly, using JavaScript, select both the button used to switch the theme and the body tag. After that, add an event listener to the button. Inside the callback function, check what the current class on the body tag is and then remove that class and add the other theme's class to the body tag. If the body tag currently has the "light" class, remove that and add the "dark" class, and vice versa.

And that is a very simple theme switch. You can also save it in local storage so that the next time someone visits the website, it will automatically remember the last theme used. Alternatively, you can use the system's preferred theme.