I am currently developing a website/web app with a dark mode functionality. The idea is that under certain circumstances (user interaction with a control or time of day), the application palette will update from an off-white color scheme to a dark gray/gray-blue color scheme.
My concern is that the theme_color defined in my manifest will not match the dark mode color palette when switched, which will make the dark mode top bar on mobile look a bit odd.
Is there a way to make the theme_color change dynamically based on the website's colors? Or, even better, is there a way to specify a condition or programmatically update the theme_color when the application changes from one mode to another (i.e. via JS on the client-side)?
On a side note, I am using CSS custom properties in my website, if that can be of use in switching from one color palette to another for the theme_color.
I am currently developing a website/web app with a dark mode functionality. The idea is that under certain circumstances (user interaction with a control or time of day), the application palette will update from an off-white color scheme to a dark gray/gray-blue color scheme.
My concern is that the theme_color defined in my manifest will not match the dark mode color palette when switched, which will make the dark mode top bar on mobile look a bit odd.
Is there a way to make the theme_color change dynamically based on the website's colors? Or, even better, is there a way to specify a condition or programmatically update the theme_color when the application changes from one mode to another (i.e. via JS on the client-side)?
On a side note, I am using CSS custom properties in my website, if that can be of use in switching from one color palette to another for the theme_color.
-
You could have 2
manifest.jsonfiles, and change which one is linked to. I'm not sure if that'd properly update in the browser, though. – Cerbrus Commented Aug 12, 2019 at 6:58 -
@Cerbrus I don't think I really have a lot of choices when it es to picking a manifest file, as it normally loads from a page's
<head>, so that might not really be an option. – Angelos Chalaris Commented Aug 12, 2019 at 7:01 - You can change the file it links to, though. But if the browser would detect that change? Give it a try... – Cerbrus Commented Aug 12, 2019 at 7:02
- @Cerbrus doesn't seem to work... – Angelos Chalaris Commented Aug 12, 2019 at 7:11
- Ah that’s a bummer – Cerbrus Commented Aug 12, 2019 at 7:31
2 Answers
Reset to default 11Full credit to @smat-8097 for this, just adding it as an answer because
- It works, and
- It was lost in the ments of their sessionStorage answer
Use:
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');
This can be called to dynamically change the theme color -- just remove any theme_color attributes in manifest.json (background_color is okay to have).
You may use sessionStorage to specify which mode is enabled , and accordingly assign manifest files on window load by using sessionStorage.get .