Generalize the theme chooser and store choice

Stored using localStorage

david/2020/01/03/index.html

@@ -91,7 +91,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/06/index.html

@@ -109,7 +109,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/10/index.html

@@ -107,7 +107,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/15/index.html

@@ -109,7 +109,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/17/index.html

@@ -103,7 +103,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/22/index.html

@@ -123,7 +123,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/29/index.html

@@ -147,7 +147,99 @@ Comme un hameau paisible au pied d’une montagne.</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/01/31/index.html

@@ -111,7 +111,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/02/07/index.html

@@ -211,7 +211,99 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/02/14/index.html

@@ -174,7 +174,99 @@ Ensuite je survole régulièrement et je marque "comme lu" (sans les l
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/02/21/index.html

@@ -151,7 +151,99 @@ mark::after {
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/03/13/index.html

@@ -158,7 +158,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/03/20/index.html

@@ -138,7 +138,99 @@ mark::after {
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/03/27/index.html

@@ -170,7 +170,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/04/03/index.html

@@ -137,7 +137,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/04/10/index.html

@@ -147,7 +147,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/04/18/index.html

@@ -175,7 +175,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/05/18/index.html

@@ -116,7 +116,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/05/20/index.html

@@ -153,7 +153,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/05/26/index.html

@@ -149,7 +149,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/06/12/index.html

@@ -135,7 +135,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/06/18/index.html

@@ -151,7 +151,99 @@ Le trou où la bête panse ses plaies, non le repaire où elle fourbit ses griff
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/11/27/index.html

@@ -114,7 +114,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/12/15/index.html

@@ -124,7 +124,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/12/21/index.html

@@ -168,7 +168,99 @@ L’alternative c’est l’ermitage.</p>
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/2020/index.html

@@ -144,7 +144,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/index.html

@@ -34,24 +34,6 @@
 
 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
 
-
-<template id="theme-selector">
-    <form>
-        <fieldset>
-            <legend>Thème</legend>
-            <label>
-                <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
-            </label>
-            <label>
-                <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
-            </label>
-            <label>
-                <input type="radio" value="light" name="chosen-color-scheme"> Clair
-            </label>
-        </fieldset>
-    </form>
-</template>
-
 <article>
 <h1>Bienvenue</h1>
 
@@ -155,15 +137,30 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script 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? (in a cookie or localstorage or sessionStorage)
+    // 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)
 
@@ -176,6 +173,11 @@
     // 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
@@ -183,15 +185,15 @@
 
         form.addEventListener('change', (e) => {
             const chosenColorScheme = e.target.value
-            document.body.classList.toggle(
-                'forced-dark',
-                chosenColorScheme === 'dark'
-            )
-            document.body.classList.toggle(
-                'forced-light',
-                chosenColorScheme === 'light'
-            )
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
         })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
     }
 
     const prefersColorSchemeDark = '(prefers-color-scheme: dark)'

david/templates/base_2020.html

@@ -45,8 +45,99 @@
     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
   </p>
+  <template id="theme-selector">
+      <form>
+          <fieldset>
+              <legend>Thème</legend>
+              <label>
+                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
+              </label>
+              <label>
+                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
+              </label>
+              <label>
+                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
+              </label>
+          </fieldset>
+      </form>
+  </template>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
-{% block extra_bottom %}{% endblock extra_bottom -%}
+<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
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+        })
+
+        const themeSelected = localStorage.getItem('theme')
+        if (themeSelected !== 'undefined') {
+            form.querySelector(`[value="${themeSelected}"]`).checked = true
+            toggleTheme(themeSelected)
+        }
+    }
+
+    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+            let mediaRules = []
+            for (const cssRule of styleSheet.cssRules) {
+                if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                    continue
+                }
+                // WARNING: Safari does not have/supports `conditionText`.
+                if (cssRule.conditionText) {
+                    if (cssRule.conditionText !== prefersColorSchemeDark) {
+                        continue
+                    }
+                } else {
+                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                        continue
+                    }
+                }
+                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+
+            // WARNING: do not try to insert a Rule to a styleSheet you are
+            // currently iterating on, otherwise the browser will be stuck
+            // in a infinite loop…
+            for (const mediaRule of mediaRules) {
+                styleSheet.insertRule(mediaRule.cssText)
+                hasDarkRules = true
+            }
+        }
+        if (hasDarkRules) {
+            loadThemeForm('#theme-selector')
+        }
+    })
+</script>
 </body>
 </html>

david/templates/profil.html

@@ -2,24 +2,6 @@
 {% block lang %}fr{% endblock %}
 {% block title %}Accueil{% endblock %}
 {% block content %}
-
-<template id="theme-selector">
-    <form>
-        <fieldset>
-            <legend>Thème</legend>
-            <label>
-                <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
-            </label>
-            <label>
-                <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
-            </label>
-            <label>
-                <input type="radio" value="light" name="chosen-color-scheme"> Clair
-            </label>
-        </fieldset>
-    </form>
-</template>
-
 <article>
 <h1>Bienvenue</h1>
 
@@ -70,77 +52,3 @@
 
 </article>
 {% endblock content %}
-
-{% block extra_bottom %}
-<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? (in a cookie or localstorage or sessionStorage)
-    // 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 loadThemeForm(templateName) {
-        const themeSelectorTemplate = document.querySelector(templateName)
-        const form = themeSelectorTemplate.content.firstElementChild
-        themeSelectorTemplate.replaceWith(form)
-
-        form.addEventListener('change', (e) => {
-            const chosenColorScheme = e.target.value
-            document.body.classList.toggle(
-                'forced-dark',
-                chosenColorScheme === 'dark'
-            )
-            document.body.classList.toggle(
-                'forced-light',
-                chosenColorScheme === 'light'
-            )
-        })
-    }
-
-    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
-    window.addEventListener('load', () => {
-        let hasDarkRules = false
-        for (const styleSheet of Array.from(document.styleSheets)) {
-            let mediaRules = []
-            for (const cssRule of styleSheet.cssRules) {
-                if (cssRule.type !== CSSRule.MEDIA_RULE) {
-                    continue
-                }
-                // WARNING: Safari does not have/supports `conditionText`.
-                if (cssRule.conditionText) {
-                    if (cssRule.conditionText !== prefersColorSchemeDark) {
-                        continue
-                    }
-                } else {
-                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                        continue
-                    }
-                }
-                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
-            }
-
-            // WARNING: do not try to insert a Rule to a styleSheet you are
-            // currently iterating on, otherwise the browser will be stuck
-            // in a infinite loop…
-            for (const mediaRule of mediaRules) {
-                styleSheet.insertRule(mediaRule.cssText)
-                hasDarkRules = true
-            }
-        }
-        if (hasDarkRules) {
-            loadThemeForm('#theme-selector')
-        }
-    })
-</script>
-{% endblock extra_bottom %}