I am using the React library, I want to add the ability to change the theme, it will look quite simple there are three buttons (or radio buttons) and when you click on one of these buttons the picture will change, the problem is the implementation and updating the page (so that the image does not disappear) I want to ask about implementation, how can I implement it? create a state and inside a state create imported names that each of them stores the picture itself? or it's a bad idea, and at the end I wanted to know how to do it so that when the page is refreshed, the picture does not disappear after changing the theme
I suggest using React Context, you would wrap your whole app in a ThemeProvider, then any component that needs to react to changes in the theme can access the current themeName value via the useContext hook. Here is a freecode blog on how to achieve what your after, using Context and CSS modules.
Just to note, this solution will not persist page refreshing, but the 2 solutions could be combined, if that is necessary. So when you change the theme, localstorage is also updated with the current theme name. On page load, you could read the theme name to configure the Context.