Die Erfahrung von Tecnoblog mit Discourse-Kommentaren

Beitragen Merkmal
29

Ja, aber wenn ich es richtig verstehe und mich richtig erinnere, ermöglicht das Discourse, zu erkennen, ob das Betriebssystem den Dunkelmodus verwendet, und sich entsprechend anzupassen. Der Beitrag, den ich gestartet habe, der eine Antwort auf den von dir verlinkten Beitrag war (und der auch auf diesen verlinkte), betraf den Schalter/die Schaltfläche in einem Blog, der/die manuell zwischen den hellen und dunklen Modi eines Blogs wechselt (unabhängig vom Modus des Betriebssystems). Klingt das richtig (und macht meine vorherige Frage damit relevant)?

Um es klarzustellen: Dies ist das Skript, das jemand für die Verwendung auf meinem Blog geschrieben hat, das jetzt wohl etwas angepasst werden muss (vielleicht müssen nur ein paar Klassen geändert werden, ich bin mir nicht sicher).

<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');
        // Elemente nach domContentLoaded aktualisieren
        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 ? "dunkel" : "hell",
                discourseUrl
            );
        }
    };

  window.addEventListener("message", handleMessageListener);
</script>