“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 years ago · 35655abca0
--- a/david/2020/01/03/index.html
+++ b/david/2020/01/03/index.html
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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">
 </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
 <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>
 <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 %}
 </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