Tool for previewing `<system-color>` keywords - including windows contrast themes
Hey All, I just gathered all the colors which are returned in different browsers, OSs and contrast themes, light & dark modes and subsequently made this tool which you can use to preview them, (without needing a BrowserStack subscription!):
https://codepen.io/crowjake/pen/MYyjpor
If you wanted to you could also use the CSS to build your own color theme with
<system-color> fallbacks and use my system for emulating how that would look in different browsers.
I discovered a few interesting things along the way which I wasn't aware of e.g. translucent colors used by some browsers, (and were a pain to reverse-engineer); also, Chrome has more colors in Dark mode than it does in Light mode, and also has some rather inaccessible defaults for GrayText in dark mode.
Please check it out. Feel free to fork it and modify it as you please. 💘
(CC: #showcase )
0 Replies