diff options
Diffstat (limited to 'www/blog/2022-12-05/index.html')
| -rw-r--r-- | www/blog/2022-12-05/index.html | 143 |
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> |