Tecnoblog의 Discourse 댓글 사용 경험

기여 기능
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>