Browse Source

Generalize the theme chooser and store choice

Stored using localStorage
master
David Larlet 1 year ago
parent
commit
3f200d1f00

+ 92
- 0
david/2020/01/03/index.html View File

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

+ 92
- 0
david/2020/01/06/index.html View File

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

+ 92
- 0
david/2020/01/10/index.html View File

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

+ 92
- 0
david/2020/01/15/index.html View File

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

+ 92
- 0
david/2020/01/17/index.html View File

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

+ 92
- 0
david/2020/01/22/index.html View File

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

+ 92
- 0
david/2020/01/29/index.html View File

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

+ 92
- 0
david/2020/01/31/index.html View File

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

+ 92
- 0
david/2020/02/07/index.html View File

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

+ 92
- 0
david/2020/02/14/index.html View File

@@ -174,7 +174,99 @@ Ensuite je survole régulièrement et je marque &quot;comme lu&quot; (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>

+ 92
- 0
david/2020/02/21/index.html View File

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

+ 92
- 0
david/2020/03/13/index.html View File

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

+ 92
- 0
david/2020/03/20/index.html View File

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

+ 92
- 0
david/2020/03/27/index.html View File

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

+ 92
- 0
david/2020/04/03/index.html View File

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

+ 92
- 0
david/2020/04/10/index.html View File

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

+ 92
- 0
david/2020/04/18/index.html View File

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

+ 92
- 0
david/2020/05/18/index.html View File

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

+ 92
- 0
david/2020/05/20/index.html View File

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

+ 92
- 0
david/2020/05/26/index.html View File

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

+ 92
- 0
david/2020/06/12/index.html View File

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