Tool for previewing `<system-color>` keywords - including windows contrast themes
AccessibilityCSSTools
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
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
Please check it out. Feel free to fork it and modify it as you please.
(CC: No Access )
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>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
GrayTextPlease check it out. Feel free to fork it and modify it as you please.
(CC: No Access )
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
