[Feature Request] The theme does not save the preferences from Fixed Bar

[sidiropoulospro]

What is your enhancement?

Hello. When we choose to have light mode with the orange color and we refresh the page, the theme and color return to the default (dark and primary). Is there a way for them to stay like that? Thank you for your time.

[einazare]

Hello there, @sidiropoulospro ,

You could use localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage You would add a prop named something like theme, and based on that you would switch between white-content class on the body tag element. NOTE!! I think you will have to announce users that you are storing on their machine this variable, in order to comply with GDPR. Another way, would be to have a database and in that database you would store the theme. You would make a call to your back-end which would return the value of the theme from the database, and based on that you would switch between white-content class on the body tag element. And now, since you are not storing anything on your users browser, you do not need anything to deal with GDPR.

Best, Manu

[sidiropoulospro]

I see, great idea. Excuse my ignorance, i am a junior web developer. But where should i set the theme again? In the index.html? Thank you for your quick reply.

[einazare]

Hello again, @sidiropoulospro ,

You should have something like:

React.useEffect(() => {
     if(theme === "light"){
          document.body.classList.add("white-content");
     }
},[]);

I think I would move everything from the src/index.js inside a new file src/App.js and inside the function of the App.js I would add that code from above. Once again, theme could be something that comes from an API (DB) or from localStorage.

Best, Manu

[sidiropoulospro]

Great yeah, i figured it out in the end. Last question, can we manage that for the colors as well? Thank you for your help.