How to set <meta name="theme-color" content="..." />

[wjkoh]

Hello everyone, I am interested in converting my website, which currently uses Pico CSS, into a Progressive Web App (PWA). To accomplish this, I need to configure the theme-color as demonstrated in the articles https://web.dev/articles/add-manifest and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color. This will ensure that the toolbar matches the background color of the webpage. However, I am aware that Pico CSS changes its background color depending on the selected Light or Dark mode. I am seeking a simple solution for this. Ideally, something like the following would be perfect:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="var(--pico-background-color)">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="var(--pico-background-color)">

[infografik]

Just add this in themeSwitcher, in your js file.