diff options
Diffstat (limited to 'old/mds/blog/css-themes-exist.md')
| -rw-r--r-- | old/mds/blog/css-themes-exist.md | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/old/mds/blog/css-themes-exist.md b/old/mds/blog/css-themes-exist.md new file mode 100644 index 0000000..263db13 --- /dev/null +++ b/old/mds/blog/css-themes-exist.md @@ -0,0 +1,78 @@ +## CSS Themes Exist Now!? + +Yeah news to me too! Seems like according to [the MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility) +it's been supported since 2019 for most browsers and supported by all by now. + +This is so wild! + +### Why is this cool? + +Well you may have noticed this is in dark mode now (if you set your preferences to dark in your OS/Browser). +But this is cool because it means we're no longer restricted to using Javascript and custom preferences for websites. + +I had assumed this existed because sites like GitHub were defaulting to darkmode despite me never setting anything in like my profile settings. But I just assumed based off of my legacy knowledge this was some custom render trick using javascript. + +#### Still no JS! + +I keep this blog JS free! While not all pages under the senders.io umbrella are javascript free - everything in www.senders.io (this blog) will always be. + +I try to keep that, not only for my sake, but for your sake too - a javascript free blog means the priority is reading. + +### Examples + +So I achieve darkmode in this blog by doing the following: + +``` +/* default / light */ +:root { + --background: white; + --font: black; + --quote: #eee; + --link: #0303ee; + --linkv: #551a8b; + --linkf: #f02727; + --articleborder: #060606; + --tableborder: #aaa; + --tablehead: #ebcfff; + --tablez: #eee; +} +@media (prefers-color-scheme: dark) { + :root { + --background: #1e1e1e; + --font: #eee; + --quote: #444; + --link: #00d3d3; + --linkv: #cd78f4; + --linkf: #f02727; + --articleborder: #23ed9b; + --tableborder: #aaa; + --tablehead: #6f5a7e; + --tablez: #313131; + } +} +``` + +Essentially, I leverage [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the specific areas I set theme specific colors (my nav bar is static regardless of dark/light mode for example). + +Then if the media preference is dark - I overwrite the variables with my dark mode values! + +Whats tricky is originally most of these values didn't actually HAVE values set - I relied on the system default for things like links and the page colors in an effort to use minimum CSS as well. + +I still feel like I am honoring that since I don't have to duplicate any actual CSS this way, I just have a lookup table of color values. + +That being said my CSS file is still only about 3kB which is not so bad. And I've actually covered most themed properties already - links, tables, quotes. + +#### Toggling Themes + +Something else I found out during this experiment is you can actually toggle the themes directly in your developer tooling. By opening your devtools and going to Inspector (in firefox at least) +there are two buttons in the styles section "toggle light color scheme" and "toggle dark color scheme" using a sun and moon icon. + +This made testing VERY easy and actually is what I noticed to prompt me into looking up if this was a standard CSS thing or not. So thanks Mozilla! + +### Conclusion + +Yeah if you've never realized this check out the MDN guides on both variables (I didn't realize these got put in the standard either!) and themes! + +* CSS Variables: [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) +* CSS Media prefers-color-scheme: [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) + |