studio
studio copied to clipboard
Set theme color for better styling of web application
<meta name="theme-color" content="#27272b">
will signal to some browsers that it should make the browser chrome around the page match the color of the page.
You'd probably want to have this dynamically set by the in-app theme selection, though since that might take a second to load, perhaps it should have a default color selected with the media
attribute?
https://stuffandnonsense.co.uk/blog/time-to-update-your-theme-color-meta-tag-for-safari
Here's how it gets autodetected on Safari with compact tabs:

Here's how it could look with the sidebar color set:

The plain media="..."
approach won't work for us because the user is able to override the system setting by manually selecting light or dark mode in settings.
However, it sounds like it's possible to dynamically change the theme-color: https://blog.terrible.dev/Dynamically-changing-the-site-theme-meta-tag/