Tecnoblog の Discourse コメントに関する体験

貢献 特徴
29

[quote=“Falco, post:28, topic:400721”]
ブログと Discourse の両方がシステムに連動する自動ダークモードを使用している場合、両者は同期された状態になります。

自動ダークモードによるカラースキームの切り替え で、Discourse に自動ダークモードを追加しました。

[/quote]\n
はい、ただし私が正しく理解し、記憶している限りでは、その機能は 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>