First iteration on theme selector with Anthony

david/index.html

@@ -127,5 +127,68 @@
   </p>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+
+<template id="theme-selector">
+    <form id="chosen-color-scheme">
+        <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>
+<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 choice?
+    // 2. store preferences? (in a cookie or localstorage)
+    // 3. create the template from scratch in JS?
+    // 4. how to deal with multiple rules by stylesheet?
+
+    const themeSelectorTemplate = document.querySelector('#theme-selector')
+    const clone = themeSelectorTemplate.content.cloneNode(true)
+    const firstChild = clone.firstElementChild
+    document.body.insertAdjacentElement('afterbegin', firstChild)
+
+    const form = document.querySelector('form#chosen-color-scheme')
+    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 mediaQueryTest = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        // TODO: do not display the form if there is no related media CSS rule.
+        for (const styleSheet of [...document.styleSheets]) {
+            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 !== mediaQueryTest) continue
+                } else {
+                    if (cssRule.cssText.startsWith(mediaQueryTest)) continue
+                }
+                const mediaRule = cssRule
+                for (const innerCssRule of mediaRule.cssRules) {
+                    styleSheet.insertRule(innerCssRule.cssText)
+                }
+                // TODO: what if there are more than one declaration?
+                break
+            }
+        }
+    })
+</script>
 </body>
 </html>

david/templates/base_2020.html

@@ -45,5 +45,68 @@
   </p>
 </footer>
 <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
+
+<template id="theme-selector">
+    <form id="chosen-color-scheme">
+        <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>
+<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 choice?
+    // 2. store preferences? (in a cookie or localstorage)
+    // 3. create the template from scratch in JS?
+    // 4. how to deal with multiple rules by stylesheet?
+
+    const themeSelectorTemplate = document.querySelector('#theme-selector')
+    const clone = themeSelectorTemplate.content.cloneNode(true)
+    const firstChild = clone.firstElementChild
+    document.body.insertAdjacentElement('afterbegin', firstChild)
+
+    const form = document.querySelector('form#chosen-color-scheme')
+    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 mediaQueryTest = '(prefers-color-scheme: dark)'
+    window.addEventListener('load', () => {
+        // TODO: do not display the form if there is no related media CSS rule.
+        for (const styleSheet of [...document.styleSheets]) {
+            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 !== mediaQueryTest) continue
+                } else {
+                    if (cssRule.cssText.startsWith(mediaQueryTest)) continue
+                }
+                const mediaRule = cssRule
+                for (const innerCssRule of mediaRule.cssRules) {
+                    styleSheet.insertRule(innerCssRule.cssText)
+                }
+                // TODO: what if there are more than one declaration?
+                break
+            }
+        }
+    })
+</script>
 </body>
 </html>