Oui, mais si je comprends bien et si je me souviens correctement, cela permet à Discourse de détecter si le système d’exploitation utilise le mode sombre, puis de s’ajuster en conséquence. Le post que j’ai initié, qui était une réponse à celui que vous avez lié (et qui y renvoyait également), concernait le bouton de bascule dans un blog qui commute manuellement entre les modes clair et sombre d’un blog (indépendamment du mode du système d’exploitation). Cela semble-t-il correct (et rend-il ainsi ma question précédente pertinente) ?
Pour être clair, voici le script qu’une personne a écrit pour l’utiliser sur mon blog, ce qui, je suppose, nécessite maintenant quelques ajustements (peut-être qu’il suffit de modifier quelques classes, je ne suis pas sûr).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// Mettre à jour les éléments après domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>