Nice write up. One comment on `currentColor` you can use <svg><use xlink:href=“…”></svg> to have separate resources and still use `currentColor` in context. We do this in Web Inspector. Mentioned here:https://webkit.org/blog/8892/dark-mode-in-web-inspector/ …
-
-
-
Thanks for the kind words!
I consider this more of a general SVG advice, but definitely great idea to mention that `currentColor` works even in the reference (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use …) context. I’ll add this.
Your great
work is linked (https://web.dev/prefers-color-scheme/#related-links …) by the way! - 1 more reply
New conversation -
-
-
Great research!
Thanks!
I'm curious how to calculate the color values of icons, text, etc. for the dark theme from the values for the light theme? Is there any algorithm to keep an acceptable contrast ratio? The inverted colors looks ugly… -
No algorithm that I was aware of. One approach to get closer to usable values might be applying `filter: invert() hue-rotate(180deg)` and then working based off these values, but your actual mileage may vary.
End of conversation
New conversation -
-
-
How does one enable this in ubuntu? I don't seem to have a system setting toggle.
-
Setting a dark theme on your system should be enough, but currently there’s a bug https://bugs.chromium.org/p/chromium/issues/detail?id=998903 …, so temporary you need to launch Chrome with these two flags: --enable-features=WebUIDarkMode --force-dark-mode
End of conversation
New conversation -
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
Dad-of-3. Developer Advocate at
), PhD from
), Postdoc at
).
, coded a lot of examples
, released a custom element `<dark-mode-toggle>` 
, and picked some of the smartest brains
inside and outside of Google to make my latest article happen…
Hello Darkness, My Old Friend!
