set theme-color dynamically according to color-scheme preference

I was about to launch one of my first Progressive Web Apps - for logis.works specifically and I couldn't help but notice that the "theme-color" (the color of the top-bar in iOS, for that matter, for example) was being a pain in the ass given that it was going all in contrary with the general layout, spirit and color of my site I decided to take a look onto Twitter's PWA. I found answers: they were setting the famous "theme-color" according to color-scheme preference. as of today May 14, 2024 you can take a look into Twitter's (twitter.com/home) "page" source code and notice this: <meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />