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

ساهم ميزة
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');
        // تحديث العناصر بعد 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>