How to Save Selected Theme on Page Reload or Switch

Discover how to persist your theme selection across page reloads and switches using JavaScript and localStorage.
---
This video is based on the question https://stackoverflow.com/q/67545420/ asked by the user 'Garima' ( https://stackoverflow.com/u/15781816/ ) and on the answer https://stackoverflow.com/a/67565852/ provided by the user 'Garima' ( https://stackoverflow.com/u/15781816/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to save the selected theme when I switch pages or reload( html/css/js)?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Save Selected Theme on Page Reload or Switch

Have you ever faced the predicament of having your website reset to its default theme every time you switch pages or refresh? This can be frustrating, especially when you've spent time choosing a theme that you prefer. Luckily, there's a straightforward solution to this common problem that allows your website to remember your theme selection, ensuring a seamless user experience.

In this guide, we'll explore how to save your selected theme using JavaScript. We'll cover everything step by step, including initializing the selected theme, applying it, and maintaining it across page reloads and switches.

The Problem at Hand

When you switch stylesheets on your website, it is common to load new styles on user interactions, like clicking a button. However, the issue arises when you reload the page or navigate away. In most cases, the browser will revert to the default stylesheet, defeating the purpose of user preference.

What You Need

To effectively save your theme, we'll use:

JavaScript to handle the theme switching and persistence.

localStorage to store the user's theme preference, even after a page reload or navigation.

The Solution

Here's a structured approach to implement a solution that keeps your selected theme, utilizing JavaScript and localStorage.

Step 1: Setup Your HTML Structure

Make sure you have a checkbox for the user to select the theme and a link to include the stylesheet. For example:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Write the JavaScript Code

The following JavaScript code will save your theme selection and apply it when needed.

[[See Video to Reveal this Text or Code Snippet]]

Code Explanation

Selecting HTML Elements: We use querySelector to target the stylesheet link and checkbox.

Storing the Theme Selection: The localStorage object allows us to save the theme preference. If there’s no previous value, we set the default state and apply the theme.

Applying the Theme: The applyTheme function changes the stylesheet based on the stored value of the checkbox. It updates the stylesheet link and checkbox state accordingly.

Event Listener: Whenever the checkbox is toggled, we update the localStorage and apply the new theme using the applyTheme function.

Conclusion

With just a few lines of JavaScript, you can easily save and apply your user's theme preference, improving their experience on your website. This approach ensures that even after a page reload or switch, their selection remains intact, leading to increased satisfaction and usability.

Implement this solution in your projects and watch your users enjoy a more personalized interface! Happy coding!