Implementing dark mode where you can save your settings
So we have a React app where the user should be able to choose light, dark or system settings for the theme. At first, I implemented all the color tokens (variables) for the light theme, and then wrapped the dark ones in a
@media (prefers-color-scheme: dark) {} query. Now I'm wondering what should be done as the user changes the settings within the app. I'm doing a window.matchMedia('(prefers-color-scheme: dark)').matches if the user doesn't have any settings stored locally, and then adding a data attribute to the <html> tag, but I'm not sure that's the right approach.
What are you recommending?0 Replies