ephemeral icon indicating copy to clipboard operation
ephemeral copied to clipboard

Recolor UI with HTML theme-color meta tag

Open cassidyjames opened this issue 3 years ago • 1 comments

Probably not the best way as it's not built into the version of WebKit being used here. Instead, I use a one-liner of injected JS to grab the contents of the theme-color meta tag on page load, and use that in GtkCSS to recolor the headerbar.

https://user-images.githubusercontent.com/611168/122969587-0d5a6280-d34a-11eb-9d64-db8f91768c1f.mp4

Potential issues:

  • It doesn't support live changes like Chrome and Safari do. I'd need to figure out how to watch the meta tag and re-set the color in a performant way.
  • I don't think where I have this is the most performant place, but I also want to set the theme-color as early as possible for UX reasons.
  • Because it uses injected JS, it doesn't work when JS is diasbled.
  • It doesn't support the brand-new media query support for theme-color

cassidyjames avatar Jun 22 '21 06:06 cassidyjames

Ha, apparently this applies to all windows, not just the current window :see_no_evil:

cassidyjames avatar Jun 24 '21 18:06 cassidyjames