With (automatic) color scheme switching available, I’m wondering if there might also be some way to switch back and forth between light and dark Discourse modes when embedded as comments in a blog. Specifically, my Ghost blog has a toggle that users can click on to manually switch back and forth between light and dark modes. I know that my blog’s CSS can’t effect the CSS within Discourse’s iframe, but with this new addition might there be another way that the toggle could also switch the Discourse color scheme? You can see an example post with comments at the bottom of this post.
This is potentially doable but a little tricky. At the moment, we haven’t added dark mode auto switching to the embedded comments endpoint. We can add that, and it would work if your Ghost site was auto-switching to dark mode when the browser switches to dark mode. But from what I can tell, your Ghost site uses a dark mode button, which won’t work with the Discourse implementation.
What you can do in your specific case, is toggle a class in the Discourse embedded comments iframe when clicking the button, and then use that class to toggle colors in your embedded stylesheet.
Sounds good. While I am currently putting together several dark mode utilizing (Ghost) themes for colleagues of mine, all of which will share a single Discourse instance, that’s still a bit further down the road.
I unfortunately don’t quite understand what you’re suggesting here. Currently, any elements that I want to utilize dark mode styling within my blog have their CSS doubled up by preceding such items with body.dark. As in
p {
color: #000;
}
body.dark p {
color: #FFF;
}
Might you be suggesting that I use that body.dark code to change things in the Discourse iframe? Because I tried inserting the following into Discourse’s Embedded CSS field, which unfortunately had no effect:
.FF2F-discourse p {
color: #000;
}
body.dark .FF2F-discourse p {
color: #FFF;
}
That being so, are you instead suggesting that I have some separate JS written so that the toggle will affect a separate change via specific targeting of a class in the iframe? Because like I stated in my previous comment, I didn’t think that external coding could affect CSS within an iframe, hence my confusion. But I’m very much solely an HTML/CSS amateur, so there’s no doubt that you know better than me and/or that I’m misunderstanding something else.
Yes, that’s what I am suggesting. Your blog’s stylesheets cannot apply to the iframe, but you can use JS to toggle the dark class in the iframe’s html or body element, and then update your Discourse embedded stylesheet accordingly.
I’ve found two pages explaining how toggling between light and dark modes for Discourse’s embed might be done, but the guy who writes my JS is wondering if the method you’re suggesting entails using postMessage (which the pages I found state) or something else.
Here’s a page explaining how to implement cross-window messaging with postMessage
While this one is actually a tutorial on how to change the CSS within an iframe via postMessage, specifically for switching between light and dark modes:
ليس لدينا حاليًا خطط لإضافة هذه الميزة. يمكن للمواقع إضافة أنماط الوضع المظلم إلى ورقة الأنماط المضمنة الخاصة بها كحل بديل (أو استخدام تقنية postMessage التي تمت مناقشتها أعلاه).
الكتلة البرمجية ① تضيف مستمع حدث في إطار Discourse المضمن والذي سيقوم بنشر رسالة إلى موقعي الإلكتروني الذي يحتوي على إطار Discourse المضمن بمجرد تحميل Discourse المضمن.
عندما يتلقى موقعي الإلكتروني رسالة من Discourse المضمن، سيقوم بإجراء تحقق، كما هو موضح في الكتلة البرمجية ②، وإذا نجح، يستدعي الدالة setIframeStyle لتعيين Discourse المضمن.
الدالة setIframeStyle، كما هو موضح في الكتلة البرمجية ③، تمرر وضع اللون، “داكن” أو “فاتح”، إلى الإطار عن طريق استدعاء postMessage. بالإضافة إلى ذلك، بمجرد تبديل الوضع الداكن، يمكن استدعاء الدالة للحفاظ على نفس وضع اللون لـ Discourse المضمن مع موقعي الإلكتروني.
الكتلة البرمجية ④ تسمح لـ Discourse المضمن بمعالجة رسالة وضع اللون المرسلة من موقعي الإلكتروني. هنا أقوم بتبديل وضع اللون عن طريق تبديل اسم الفئة إلى علامة الجسم.
بالإضافة إلى ذلك، تتم إضافة الكتلتين البرمجيتين ① و ④ من خلال صفحة مسؤول Discourse، كما يلي:
يمكنني التأكيد على أن الطريقة المذكورة أعلاه لا تزال تعمل، ولكن كان من الجيد عدم الاضطرار إلى كتابة التعليمات البرمجية من لقطة شاشة لذا، إليك هي، محدثة قليلاً:
الخطوات
ينتهي عرض إطار iframe الخاص بالتعليقات ويُرسل رسالة إلى نافذة المتصفح الرئيسية، لإعلامها بذلك.
يستعلم المتصفح عن إعداد الوضع الداكن/الفاتح ويرسل القيمة مرة أخرى إلى إطار iframe.
يستقبل إطار iframe الرسالة، ويضبط سمة بيانات (data-attribute) أو فئة (class) أو ما شابه، بناءً على إعداد الوضع الداكن/الفاتح.
التعليمات البرمجية
بمجرد تحميل إطار iframe، أرسل إشعارًا إلى النافذة الأصلية. يجب إدخال هذا على Discourse، ضمن Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded Header.
تعامل مع هذا المشغل الوارد في النافذة الرئيسية. تعيش هذه التعليمات البرمجية في موقع مدونتك:
const discourse_url = "https://your.discourse-instance.org";
// هنا، نحدد السمة، ونرسل رسالة إلى إطار iframe لإعلامه بالسمة
// انظر أدناه لكيفية ربط notifyFrameStyle
const notifyIFrameOfTheme = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
// قم بتعديل السطر أدناه للحصول على إعداد الوضع المظلم، اعتمادًا على كيفية تخزينه
theme: document.documentElement.getAttribute("data-theme")
},
discourse_url
);
}
};
// استدعاء setFrameStyle عند تلقي رسالة "iframe loaded"
const handleMessageListener = (event) => {
var origin = event.origin;
if ((origin === discourse_url) && (event.data == "iframe loaded")) {
notifyIFrameOfTheme();
}
};
في كتلة script من (1)، أضف مستمعًا لرسالة السمة التي أرسلتها notifyFrameStyle:
window.addEventListener("message", (event) => {
const payload = event.data;
if (payload.theme) {
// افعل شيئًا بإعداد السمة؛ لقد قمت بتعيين السمة `data-theme` على `html` الخاص بإطار iframe،
// ولكن قد ترغب في تعيين سمة فئة أو ما شابه
document.documentElement.setAttribute("data-theme", payload.theme);
}
}, false);
التصميم
ضمن Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded CSS، يمكنك الآن توفير CSS لكل وضع. على سبيل المثال، يمكنك تجاوز متغيرات تصميم Discourse:
لذا، إليك هي، محدثة قليلاً: