|
@tomayac | |||||
|
I have done a ton of research 🥼, 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! web.dev/prefers-color-… twitter.com/ChromiumDev/st…
|
||||||
|
||||||
|
Timothy Hatcher
@xeenon
|
27. lip |
|
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: webkit.org/blog/8892/dark…
|
||
|
||
|
|
Thomas Steiner
@tomayac
|
27. lip |
|
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 (developer.mozilla.org/en-US/docs/Web…) context. I’ll add this.
Your great 👏 work is linked (web.dev/prefers-color-…) by the way!
|
||
|
|
||
|
Alexey Rodionov
@alexey_rodionov
|
27. lip |
|
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…
|
||
|
|
||
|
|
Thomas Steiner
@tomayac
|
27. lip |
|
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.
|
||
|
|
||
|
John Brandenburg
@johnbburg
|
13. ruj |
|
How does one enable this in ubuntu? I don't seem to have a system setting toggle.
|
||
|
|
||
|
|
Thomas Steiner
@tomayac
|
14. ruj |
|
Setting a dark theme on your system should be enough, but currently there’s a bug bugs.chromium.org/p/chromium/iss…, so temporary you need to launch Chrome with these two flags:
--enable-features=WebUIDarkMode --force-dark-mode
|
||
|
|
||