diff options
author | Steph Enders <steph@senders.io> | 2024-02-29 09:31:15 -0500 |
---|---|---|
committer | Steph Enders <steph@senders.io> | 2024-02-29 09:31:15 -0500 |
commit | 2b39175011422a0d8f96d7f598f46e2a781dd28f (patch) | |
tree | dd896a1e35e2ec194bfce829afd61f553652464a /mds/blog/css-themes-exist.md | |
parent | 350a5058cf383733a7e75f753abdcd1cb7aae2c5 (diff) |
Initial rework commit: Build Script POC and CSS done
I've created the main CSS layout and a proof of concept for the build
script: this will actually build any "done" _post/ file and generate
it as a workable HTML file. However, no index file generate, rss, or
gemini is implemented
Diffstat (limited to 'mds/blog/css-themes-exist.md')
-rw-r--r-- | mds/blog/css-themes-exist.md | 78 |
1 files changed, 0 insertions, 78 deletions
diff --git a/mds/blog/css-themes-exist.md b/mds/blog/css-themes-exist.md deleted file mode 100644 index 263db13..0000000 --- a/mds/blog/css-themes-exist.md +++ /dev/null @@ -1,78 +0,0 @@ -## 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) - |