“Flash Of Default Theme” See https://mxb.dev/blog/color-theme-switcher/ I had to move the theme definition to the html element (vs. body) with the side-effect to have a consistent scrollbar color.

4 年之前 · 35655abca0
--- a/david/2020/01/03/index.html
+++ b/david/2020/01/03/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -110,28 +126,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/06/index.html
+++ b/david/2020/01/06/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -128,28 +144,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/10/index.html
+++ b/david/2020/01/10/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -126,28 +142,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/15/index.html
+++ b/david/2020/01/15/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -128,28 +144,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/17/index.html
+++ b/david/2020/01/17/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -122,28 +138,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/22/index.html
+++ b/david/2020/01/22/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -142,28 +158,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/29/index.html
+++ b/david/2020/01/29/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -166,28 +182,6 @@ Comme un hameau paisible au pied d’une montagne.</p>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/01/31/index.html
+++ b/david/2020/01/31/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -130,28 +146,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/02/07/index.html
+++ b/david/2020/02/07/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -230,28 +246,6 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/02/14/index.html
+++ b/david/2020/02/14/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -193,28 +209,6 @@ Ensuite je survole régulièrement et je marque &quot;comme lu&quot; (sans les l
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/02/21/index.html
+++ b/david/2020/02/21/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -170,28 +186,6 @@ mark::after {
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/03/13/index.html
+++ b/david/2020/03/13/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -177,28 +193,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/03/20/index.html
+++ b/david/2020/03/20/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -157,28 +173,6 @@ mark::after {
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/03/27/index.html
+++ b/david/2020/03/27/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -189,28 +205,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/04/03/index.html
+++ b/david/2020/04/03/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -156,28 +172,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/04/10/index.html
+++ b/david/2020/04/10/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -166,28 +182,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/04/18/index.html
+++ b/david/2020/04/18/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -194,28 +210,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/05/18/index.html
+++ b/david/2020/05/18/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -135,28 +151,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/05/20/index.html
+++ b/david/2020/05/20/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -172,28 +188,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/05/26/index.html
+++ b/david/2020/05/26/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -168,28 +184,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/06/12/index.html
+++ b/david/2020/06/12/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -154,28 +170,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/06/18/index.html
+++ b/david/2020/06/18/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -170,28 +186,6 @@ Le trou où la bête panse ses plaies, non le repaire où elle fourbit ses griff
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/11/27/index.html
+++ b/david/2020/11/27/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -133,28 +149,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/12/15/index.html
+++ b/david/2020/12/15/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -143,28 +159,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/12/21/index.html
+++ b/david/2020/12/21/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -187,28 +203,6 @@ L’alternative c’est l’ermitage.</p>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/2020/index.html
+++ b/david/2020/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -163,28 +179,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/index.html
+++ b/david/index.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>

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

@@ -156,28 +172,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
--- a/david/templates/base_2020.html
+++ b/david/templates/base_2020.html
@@ -23,7 +23,7 @@
 <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-04-25.css">
 <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>
@@ -31,6 +31,22 @@
 <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>
 {% block extra_head %}{% endblock %}
 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
 {% block content %}{% endblock content %}
@@ -64,28 +80,6 @@
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
 <script type="text/javascript">
    /* This is a work in progress with Anthony https://ricaud.me */

    // TODISCUSS:
    // 1. give a way for the user to close that chooser?
    // 2. store preferences? Done using localStorage
    // 3. create the template from scratch in JS?
    // 4. how to make it generic? (no need for forced-dark/light existing rules)

    // Results from a Poll: https://mastodon.social/@dav/104093540923157521
    // Avoir un moyen de changer de thème d'un site à la main :
    // 49% => Utile
    // 23% => Pas utile
    // 9% => So 2000
    // 19% => Je veux le même
    // After 24 hours and 43 votes
    // A bit hard to interpret, I guess people wanting it found it useful too!

    function toggleTheme(themeName) {
        document.body.classList.toggle('forced-dark', themeName === 'dark')
        document.body.classList.toggle('forced-light', themeName === 'light')
    }

    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild