Change theme_color when switching to dark mode

Question

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.

Answer 1

Full credit to @smat-8097 for this, just adding it as an answer because

1. It works, and
2. It was lost in the comments 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).