From 44da246fa5e373c86373889b53263f52af84d525 Mon Sep 17 00:00:00 2001
From: Bill <bill@billserver.senders.io>
Date: Sat, 31 Dec 2022 14:23:20 -0500
Subject: Major overhaul, markdowns + copyright notice
---
www/blog/2022-12-05/index.html | 143 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 143 insertions(+)
create mode 100644 www/blog/2022-12-05/index.html
(limited to 'www/blog/2022-12-05')
diff --git a/www/blog/2022-12-05/index.html b/www/blog/2022-12-05/index.html
new file mode 100644
index 0000000..34ba409
--- /dev/null
+++ b/www/blog/2022-12-05/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="generator"
+ content="HTML Tidy for HTML5 for Linux version 5.6.0">
+ <title>senders.io - CSS Themes Exist Now!?</title>
+ <link rel='stylesheet'
+ type='text/css'
+ href='/index.css'>
+ <meta name="viewport"
+ content="width=device-width, initial-scale=1">
+</head>
+<body>
+ <div id='header'>
+ <a class='title'
+ href='/'>senders.io</a>
+ <nav>
+ <a href="/blog">blog</a> <a rel="external noopener noreferrer"
+ target="_blank"
+ href="https://github.com/s3nd3r5">github</a> <a rel=
+ "external noopener noreferrer"
+ target="_blank"
+ href="https://git.senders.io">cgit</a> <a rel=
+ "me external noopener noreferrer"
+ target="_blank"
+ href="https://mastodon.online/@senders">mastodon</a>
+ </nav>
+ </div>
+ <div id="body">
+ <article>
+ <h2>CSS Themes Exist Now!?</h2>
+ <p>Yeah news to me too! Seems like according to <a rel=
+ "external noopener noreferrer"
+ target="_blank"
+ href=
+ "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility">
+ the MDN</a> it’s been supported since 2019 for most browsers and
+ supported by all by now.</p>
+ <p>This is so wild!</p>
+ <h3>Why is this cool?</h3>
+ <p>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.</p>
+ <p>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.</p>
+ <h4>Still no JS!</h4>
+ <p>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.</p>
+ <p>I try to keep that, not only for my sake, but for your sake too - a
+ javascript free blog means the priority is reading.</p>
+ <h3>Examples</h3>
+ <p>So I achieve darkmode in this blog by doing the following:</p>
+ <pre><code>/* 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;
+ }
+}
+</code></pre>
+ <p>Essentially, I leverage <a rel="external noopener noreferrer"
+ target="_blank"
+ href=
+ "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
+ CSS Variables</a> to define the specific areas I set theme specific
+ colors (my nav bar is static regardless of dark/light mode for
+ example).</p>
+ <p>Then if the media preference is dark - I overwrite the variables with
+ my dark mode values!</p>
+ <p>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.</p>
+ <p>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.</p>
+ <p>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.</p>
+ <h4>Toggling Themes</h4>
+ <p>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.</p>
+ <p>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!</p>
+ <h3>Conclusion</h3>
+ <p>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!</p>
+ <ul>
+ <li>CSS Variables: <a rel="external noopener noreferrer"
+ target="_blank"
+ href=
+ "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</a>
+ </li>
+ <li>CSS Media prefers-color-scheme: <a rel=
+ "external noopener noreferrer"
+ target="_blank"
+ href=
+ "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</a>
+ </li>
+ </ul>
+ </article>
+ <div id="footer">
+ <i>December 05, 2022</i>
+ </div>
+ <div id='copyright'>
+ © 2023 senders dot io - <a rel="license external noopener noreferrer"
+ target="_blank"
+ href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+ unless otherwise noted.
+ </div>
+ </div>
+</body>
+</html>
--
cgit v1.2.3-54-g00ecf