--post-date: 2022-12-05
--type: blog
    <article>
      <h1>CSS Themes Exist Now!?</h1>
      <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>
      <h2>Why is this cool?</h2>
      <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>
      <h3>Still no JS!</h3>
      <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>
      <h2>Examples</h2>
      <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>
      <h3>Toggling Themes</h3>
      <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>
      <h2>Conclusion</h2>
      <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>