Die Erfahrung von Tecnoblog mit Discourse-Kommentaren

Beitragen Merkmal
29

Ja, aber wenn ich richtig verstanden und mich richtig erinnere, ermöglicht dies Discourse, zu erkennen, ob das Betriebssystem den Dunkelmodus verwendet, und sich entsprechend anzupassen. Der Beitrag, den ich gestartet habe, war eine Antwort auf den von dir verlinkten Beitrag (der seinerseits auch darauf verwies) und betraf den Schalter/die Schaltfläche in einem Blog, der manuell zwischen dem hellen und dem dunklen Modus des Blogs umschaltet (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 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 ? "dark" : "light",
                discourseUrl
            );
        }
    };

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