studio icon indicating copy to clipboard operation
studio copied to clipboard

Set theme color for better styling of web application

Open rgov opened this issue 1 year ago • 1 comments

<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:

image

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

image

rgov avatar Aug 16 '22 22:08 rgov

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/

jtbandes avatar Aug 16 '22 23:08 jtbandes