summaryrefslogtreecommitdiff
path: root/mds/blog/css-themes-exist.md
diff options
context:
space:
mode:
authorSteph Enders <steph@senders.io>2024-02-29 09:31:15 -0500
committerSteph Enders <steph@senders.io>2024-02-29 09:31:15 -0500
commit2b39175011422a0d8f96d7f598f46e2a781dd28f (patch)
treedd896a1e35e2ec194bfce829afd61f553652464a /mds/blog/css-themes-exist.md
parent350a5058cf383733a7e75f753abdcd1cb7aae2c5 (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.md78
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)
-