Browse Source

First iteration on theme selector with Anthony

master
David Larlet 1 year ago
parent
commit
79447848e5
No known key found for this signature in database
2 changed files with 126 additions and 0 deletions
  1. 63
    0
      david/index.html
  2. 63
    0
      david/templates/base_2020.html

+ 63
- 0
david/index.html View File

@@ -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>

+ 63
- 0
david/templates/base_2020.html View File

@@ -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>

Loading…
Cancel
Save