summaryrefslogtreecommitdiff
path: root/www/blog/2022-12-05/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'www/blog/2022-12-05/index.html')
-rw-r--r--www/blog/2022-12-05/index.html143
1 files changed, 0 insertions, 143 deletions
diff --git a/www/blog/2022-12-05/index.html b/www/blog/2022-12-05/index.html
deleted file mode 100644
index fcb53ec..0000000
--- a/www/blog/2022-12-05/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="generator"
- content="HTML Tidy for HTML5 for Linux version 5.7.45">
- <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://tech.lgbt/@senders">fedi</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-sa/4.0/">CC BY-SA
- 4.0</a> unless otherwise noted.
- </div>
- </div>
-</body>
-</html>