From 2b39175011422a0d8f96d7f598f46e2a781dd28f Mon Sep 17 00:00:00 2001
From: Steph Enders <steph@senders.io>
Date: Thu, 29 Feb 2024 09:31:15 -0500
Subject: 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
---
 old/mds/blog/css-themes-exist.md | 78 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 old/mds/blog/css-themes-exist.md

(limited to 'old/mds/blog/css-themes-exist.md')

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)
+
-- 
cgit v1.2.3-54-g00ecf