تجربة تكنوبلوج مع تعليقات ديسكورش

ساهم ميزة
29

نعم، ولكن إذا فهمت وتذكرت بشكل صحيح، فإن ذلك يتيح لـ Discourse اكتشاف ما إذا كان نظام التشغيل يستخدم الوضع المظلم، ثم يضبط نفسه وفقًا لذلك. الموضوع الذي أعددته، والذي كان ردًا على الموضوع الذي ربطت به (والذي ربط أيضًا به)، كان يتعلق بزر التبديل في مدونة يقوم بالتبديل يدويًا بين الوضع الفاتح والوضع المظلم للمدونة (بغض النظر عن وضع نظام التشغيل). هل يبدو ذلك صحيحًا (وهذا بدوره يجعل سؤالي السابق ذا صلة)؟

وللتوضيح، هذا هو السكربت الذي طلبت من شخص ما كتابته لاستخدامه في مدونتي، والذي أعتقد الآن أنه يحتاج إلى بعض التعديلات (ربما يحتاج فقط إلى تغيير بعض الفئات، لست متأكدًا).

<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');
        // Update elements after 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>