Hi,
I’m looking to how create a custom theme that change based on OS light or dark preference.
In the extension to create a custom theme I don’t see the possibility to specify colors for light and for dark theme.
When Windows is switched to dark mode my custom theme still be light.
How can I set a color combinations also for the dark mode?
I tried to look at the documentation but I found only CSS code that I think cannot work in the manifest.json of the theme.
thank you for the help.
There are two basic approaches you can use to react to system theme changes.
First, you can create a static theme that includes the "theme" and "dark_theme" objects in your theme’s manifest.json file. I managed to find an example theme that automatically changes based on the user’s OS light/dark preferences. That theme was originally attacked to Issue 1629228, comment #3.
Second, you can create a dynamic theme. Inside that you could use matchMedia to detect when the user’s prefers-color-scheme changes and dynamically update the theme using theme.update(). See this blog post by David Walsh for an example of how to use matchMedia like this.
I’d recommend going with the first approach as it’s more straightforward.