davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Color Theme Switcher (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://mxb.dev/blog/color-theme-switcher/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Color Theme Switcher</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://mxb.dev/blog/color-theme-switcher/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p class="lead">Last year, the design gods decided that dark modes were the new hotness. "Light colors are for suckers", they laughed, drinking matcha tea on their fixie bikes or whatever.</p>

<p>And so every operating system, app and even some websites (mine included) suddenly had to come up with a dark mode. Fortunately though, this coincided nicely with widespread support for CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">custom properties</a> and the introduction of a new <code>prefers-color-scheme</code> media query.</p>

<p>There’s lots of tutorials on <a href="https://css-tricks.com/dark-modes-with-css/">how to build dark modes</a> already, but why limit yourself to light and dark? Only a Sith deals in absolutes.</p>

<p>That’s why I decided to build a new feature on my site:<br/><strong>dynamic color themes!</strong> Yes, instead of two color schemes, I now have ten! That’s eight better than the previous website!</p>

<p>Go ahead and try it, hit that <strong>paintroller-button</strong> in the header.<br/>I’ll wait.</p>

<p><em>If you’re reading this somewhere else, the effect would look something like this:</em></p>

<p class="extend"><video poster="/assets/media/theme-switcher/theme-switcher-still.png" preload="metadata" muted="" controls=""><source src="/assets/media/theme-switcher/theme-switcher.webm" type="video/webm"><source src="/assets/media/theme-switcher/theme-switcher.mp4" type="video/mp4"/></source></video></p>

<p>Nice, right? Let’s look at how to do that!</p>

<h2 id="h-define-color-schemes"><a class="heading-anchor" href="#h-define-color-schemes">#</a> Define Color Schemes</h2>

<p>First up, we need some data. We need to define our themes in a central location, so they’re easy to access and edit. My site uses <a href="https://www.11ty.dev/">Eleventy</a>, which lets me create a simple JSON file for that purpose:</p>

<pre class="language-json"><code class="language-json"><br/><span class="token punctuation">[</span><br/>    <span class="token punctuation">{</span><br/>        <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"bowser"</span><span class="token punctuation">,</span><br/>        <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Bowser's Castle"</span><span class="token punctuation">,</span><br/>        <span class="token property">"colors"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br/>            <span class="token property">"primary"</span><span class="token operator">:</span> <span class="token string">"#7f5af0"</span><span class="token punctuation">,</span><br/>            <span class="token property">"secondary"</span><span class="token operator">:</span> <span class="token string">"#2cb67d"</span><span class="token punctuation">,</span><br/>            <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"#fffffe"</span><span class="token punctuation">,</span><br/>            <span class="token property">"border"</span><span class="token operator">:</span> <span class="token string">"#383a61"</span><span class="token punctuation">,</span><br/>            <span class="token property">"background"</span><span class="token operator">:</span> <span class="token string">"#16161a"</span><span class="token punctuation">,</span><br/>            <span class="token property">"primaryOffset"</span><span class="token operator">:</span> <span class="token string">"#e068fd"</span><span class="token punctuation">,</span><br/>            <span class="token property">"textOffset"</span><span class="token operator">:</span> <span class="token string">"#94a1b2"</span><span class="token punctuation">,</span><br/>            <span class="token property">"backgroundOffset"</span><span class="token operator">:</span> <span class="token string">"#29293e"</span><br/>        <span class="token punctuation">}</span><br/>    <span class="token punctuation">}</span><span class="token punctuation">,</span><br/>    <span class="token punctuation">{</span>...<span class="token punctuation">}</span><br/><span class="token punctuation">]</span></code></pre>

<p>Our color schemes are objects in an array, which is now available during build. Each theme gets a <code>name</code>, <code>id</code> and a couple of color definitions. The parts of a color scheme depend on your specific design; In my case, I assigned each theme eight properties.</p>

<div class="callout callout--tip"><span class="callout__icon"><svg class="icon icon--lightbulb" role="img" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/icons.sprite.svg#icon-lightbulb"/></svg></span><div class="callout__content"><p>It's a good idea to give these properties logical names instead of visual ones like "light" or "muted", as colors vary from theme to theme. I've also found it helpful to define a couple of "offset" colors - these are used to adjust another color on interactions like hover and such.</p></div></div>

<p>In addition to the “default” and “dark” themes I already had before, I created eight more themes this way. I used a couple of different sources for inspiration; the ones I liked best are <a href="https://color.adobe.com/explore">Adobe Color</a> and <a href="https://www.happyhues.co/">happyhues</a>.</p>

<p>All my themes are named after Mario Kart 64 race tracks by the way, because why not.</p>

<h2 id="h-transform-to-custom-css-properties"><a class="heading-anchor" href="#h-transform-to-custom-css-properties">#</a> Transform to Custom CSS Properties</h2>

<p>To actually use our colors in CSS, we need them in a different format. Let’s create a stylesheet and make custom properties out of them. Using Eleventy’s template rendering, we can do that by generating a <code>theme.css</code> file from the data, looping over all themes. We’ll use a macro to output the color definitions for each.</p>

<p>I wrote this in Nunjucks, the templating engine of my choice - but you can do it in any other language as well.</p>

<pre class="language-css"><code class="language-css"><br/>---<br/><span class="token property">permalink</span><span class="token punctuation">:</span> <span class="token string">'/assets/css/theme.css'</span><br/><span class="token property">excludeFromSitemap</span><span class="token punctuation">:</span> true<br/>---<br/><br/><span class="token punctuation">{</span>% macro <span class="token function">colorscheme</span><span class="token punctuation">(</span>colors<span class="token punctuation">)</span> %<span class="token punctuation">}</span><br/>    <span class="token selector">--color-bg:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.background <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-bg-offset:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.backgroundOffset <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-text:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.text <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-text-offset:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.textOffset <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-border:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.border <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-primary:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.primary <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-primary-offset:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.primaryOffset <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;<br/>    --color-secondary:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> colors.secondary <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">;</span><br/><span class="token punctuation">{</span>% endmacro %<span class="token punctuation">}</span><br/><br/><br/><span class="token punctuation">{</span>%- set default = themes|<span class="token function">getTheme</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">)</span> -%<span class="token punctuation">}</span><br/><span class="token punctuation">{</span>%- set dark = themes|<span class="token function">getTheme</span><span class="token punctuation">(</span><span class="token string">'dark'</span><span class="token punctuation">)</span> -%<span class="token punctuation">}</span><br/><br/><br/><span class="token selector">:root</span> <span class="token punctuation">{</span><br/>    <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">colorscheme</span><span class="token punctuation">(</span>default.colors<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br/><span class="token punctuation">}</span><br/><br/><span class="token atrule"><span class="token rule">@media</span><span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br/>    <span class="token selector">:root</span> <span class="token punctuation">{</span><br/>        <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">colorscheme</span><span class="token punctuation">(</span>dark.colors<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br/>    <span class="token punctuation">}</span><br/><span class="token punctuation">}</span><br/><br/><br/><span class="token punctuation">{</span>% for theme in themes %<span class="token punctuation">}</span><br/><span class="token selector">html[data-theme='{{ theme.id }}']</span> <span class="token punctuation">{</span><br/>    <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">colorscheme</span><span class="token punctuation">(</span>theme.colors<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><br/><span class="token punctuation">}</span><br/><span class="token punctuation">{</span>% endfor %<span class="token punctuation">}</span><br/></code></pre>

<h2 id="h-using-colors-on-the-website"><a class="heading-anchor" href="#h-using-colors-on-the-website">#</a> Using colors on the website</h2>

<p>Now for the tedious part - we need to go through all of the site’s styles and replace every color definition with the corresponding custom property. This is different for every site - but your code might look like this if it’s written in SCSS:</p>

<pre class="language-scss"><code class="language-scss"><span class="token selector">body </span><span class="token punctuation">{</span><br/>    <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span><br/>    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token variable">$line-height</span><span class="token punctuation">;</span><br/>    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$gray-dark</span><span class="token punctuation">;</span><br/><span class="token punctuation">}</span></code></pre>

<p>Replace the static SCSS variable with the theme’s custom property:</p>

<pre class="language-scss"><code class="language-scss"><span class="token selector">body </span><span class="token punctuation">{</span><br/>    <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span><br/>    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token variable">$line-height</span><span class="token punctuation">;</span><br/>    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text<span class="token punctuation">)</span><span class="token punctuation">;</span><br/><span class="token punctuation">}</span></code></pre>

<div class="callout callout--warning"><span class="callout__icon"><svg class="icon icon--warning" role="img" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/icons.sprite.svg#icon-warning"/></svg></span><div class="callout__content"><p><strong>Attention:</strong> Custom Properties are supported in <a href="https://caniuse.com/#search=custom%20properties">all modern browsers</a>, but if you need to support IE11 or Opera Mini, be sure to provide a fallback.</p></div></div>

<p>It’s fine to mix static preprocessor variables and custom properties by the way - they do different things. Our line height is not going to change dynamically.</p>

<p>Now do this for every instance of <code>color</code>, <code>background</code>, <code>border</code>, <code>fill</code> … you get the idea. Told you it was gonna be tedious.</p>

<h2 id="h-building-the-theme-switcher"><a class="heading-anchor" href="#h-building-the-theme-switcher">#</a> Building the Theme Switcher</h2>

<p>If you made it this far, congratulations! Your website is now themeable (in theory). We still need a way for people to switch themes without manually editing the markup though, that’s not very user-friendly. We need some sort of UI component for this - a theme switcher.</p>

<h3 id="h-generating-the-markup"><a class="heading-anchor" href="#h-generating-the-markup">#</a> Generating the Markup</h3>

<p>The switcher structure is pretty straightforward: it’s essentially a list of buttons, one for each theme. When a button is pressed, we’ll switch colors. Let’s give the user an idea what to expect by showing the theme colors as little swatches on the button:</p>

<figure class="extend"><img src="/assets/media/theme-switcher/theme-buttons.jpg" loading="lazy" alt="a row of buttons, showing the theme name and color swatches"/><figcaption>Fact: All good design is derivative of Mario Kart</figcaption></figure>

<p>Here’s the template to generate that markup. We’ll use inline style attributes here to display the background, text and accent colors. The button also holds its <code>id</code> in a <code>data-theme-id</code> attribute, we will pick that up with Javascript later.</p>

<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br/>{% for theme in themes %}<br/>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__item<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br/>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__btn<span class="token punctuation">"</span></span> <span class="token attr-name">data-theme-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ theme.id }}<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">background-color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.background <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br/>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__name<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.text <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ theme.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__palette<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br/>                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__hue<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">background-color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.primary <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ theme.colors.primary }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__hue<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">background-color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.secondary <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ theme.colors.secondary }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__hue<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">background-color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.border <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ theme.colors.border }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__hue<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">background-color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.text <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ theme.colors.text }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>themeswitcher__hue<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">background-color:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> theme.colors.textOffset <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ theme.colors.textOffset }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><br/>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><br/>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><br/>{% endfor %}<br/><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><br/></code></pre>

<p>There’s some styling involved as well, but I’ll leave that out for brevity here. If you’re interested in the extended version, you can find all the code in <a href="https://github.com/maxboeck/mxb">my site’s github repo</a>.</p>

<h3 id="h-setting-the-theme"><a class="heading-anchor" href="#h-setting-the-theme">#</a> Setting the Theme</h3>

<p>The last missing piece is some Javascript to handle the switcher functionality.</p>

<pre class="language-js"><code class="language-js"><br/><span class="token keyword">class</span> <span class="token class-name">ThemeSwitcher</span> <span class="token punctuation">{</span><br/>    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br/>        <br/>        <span class="token keyword">this</span><span class="token punctuation">.</span>activeTheme <span class="token operator">=</span> <span class="token string">'default'</span><br/>        <span class="token keyword">this</span><span class="token punctuation">.</span>hasLocalStorage <span class="token operator">=</span> <span class="token keyword">typeof</span> Storage <span class="token operator">!==</span> <span class="token string">'undefined'</span><br/><br/>        <br/>        <span class="token keyword">this</span><span class="token punctuation">.</span>themeSelectBtns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'button[data-theme-id]'</span><span class="token punctuation">)</span><br/>        <br/>        Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>themeSelectBtns<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">btn</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><br/>            <span class="token keyword">const</span> id <span class="token operator">=</span> btn<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>themeId<br/>            btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setTheme</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><br/>        <span class="token punctuation">}</span><span class="token punctuation">)</span><br/>    <span class="token punctuation">}</span><br/><span class="token punctuation">}</span><br/><br/><br/><br/><span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span><span class="token constant">CSS</span> <span class="token operator">&amp;&amp;</span> <span class="token constant">CSS</span><span class="token punctuation">.</span><span class="token function">supports</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token string">'var(--fake-var)'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br/>    <span class="token keyword">new</span> <span class="token class-name">ThemeSwitcher</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br/><span class="token punctuation">}</span></code></pre>

<p>When somebody switches themes, we’ll take the theme id and set is as the <code>data-theme</code> attribute on the document. That will trigger the corresponding selector in our <code>theme.css</code> file, and the chosen color scheme will be applied.</p>

<p>Since we want the theme to persist even when the user reloads the page or navigates away, we’ll save the selected id in <code>localStorage</code>.</p>

<pre class="language-js"><code class="language-js"><span class="token function">setTheme</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br/>    <br/>    <span class="token keyword">this</span><span class="token punctuation">.</span>activeTheme <span class="token operator">=</span> id<br/>    document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'data-theme'</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span><br/><br/>    <br/>    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hasLocalStorage<span class="token punctuation">)</span> <span class="token punctuation">{</span><br/>        localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">"theme"</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span><br/>    <span class="token punctuation">}</span><br/><span class="token punctuation">}</span></code></pre>

<p>On a server-rendered site, we could store that piece of data in a cookie instead and apply the theme id to the html element before serving the page. Since we’re dealing with a static site here though, there is no server-side processing - so we have to do a small workaround.</p>

<p>We’ll retrieve the theme from <code>localStorage</code> in a tiny additional script in the head, right after the stylesheet is loaded. Contrary to the rest of the Javascript, we want this to execute as early as possible to avoid a FODT (“flash of default theme”).</p>

<p>OK that’s not actually a real term. I made that up.</p>

<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><br/>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/assets/css/main.css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br/>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"><br/>        <br/>        localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'theme'</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <br/>        document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'data-theme'</span><span class="token punctuation">,</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'theme'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br/>    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span><br/><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span></code></pre>

<p>If no stored theme is found, the site uses the default color scheme (either light or dark, depending on the users <a href="https://web.dev/prefers-color-scheme/">system preference</a>).</p>

<h2 id="h-get-creative"><a class="heading-anchor" href="#h-get-creative">#</a> Get creative</h2>

<p>You can create any number of themes this way, and they’re not limited to flat colors either - with some extra effort you can have patterns, gradients or even GIFs in your design. Although just because you can doesn’t always mean you should, as is evidenced by my site’s new <em>Rainbow Road</em> theme.</p>

<p>Please don’t use that one.</p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>