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:
We currently don’t have plans to add this feature. Sites can add dark-mode styles to their embedded stylesheet as a workaround (or use the postMessage technique discussed above.)
Code block ① adds an event listener in embedded Discourse iframe which will post message to my website that contains embedded Discourse iframe once embedded Discourse is loaded.
When my website receives message from embedded Discourse, it will make a validation, as shown in code block ②, and if passed, call the setIframeStyle function to set embedded Discourse.
The setIframeStyle function, just shown in code block ③, pass color mode, “dark” or “light”, to iframe by calling postMessage. In addition, once the dark mode switched, the function could be called to keep embedded Discourse same color mode with my website.
Code block ④ allows embedded Discourse to be able to process the color mode message sent from my website. Here I toggle the color mode by switching class name to the body tag.
Additionally, code block ① and ④ are added by Discourse admin page, as blow:
I can confirm that the above method still works, but it’d have been nice not to have had to type in code from a screenshot So, here it is, slightly updated:
Steps
The comments iframe finishes rendering and sends a message to the main browser window, telling it so.
The browser queries its dark/light mode setting and sends back the value into the iframe.
The iframe receives the message, and sets a data-attribute, class, or similar, based on the dark/light mode setting.
Code
Once iframe is loaded, send a notification to the parent window. This needs to be entered on Discourse, under Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded Header.
Handle this incoming trigger in the main window. This code lives in your blog site:
<script type="text/javascript">
const discourse_url = "https://your.discourse-instance.org";
// Here, we determine the theme, and send a message to the iframe to let it know what the theme is
// See below for how we hook up notifyFrameStyle
const notifyIFrameOfTheme = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
// Modify the line below to grab dark mode setting, depending on how you store it
theme: document.documentElement.getAttribute("data-theme")
},
discourse_url
);
}
};
// Call setFrameStyle when we receive the "iframe loaded" message
const handleMessageListener = (event) => {
var origin = event.origin;
if ((origin === discourse_url) && (event.data == "iframe loaded")) {
notifyIFrameOfTheme();
}
};
</script>
In the <script> block from (1), add a listener for the theme message sent by notifyFrameStyle:
window.addEventListener("message", (event) => {
const payload = event.data;
if (payload.theme) {
// Do something with the theme setting; I set the `data-theme` attribute on the iframe's <html>,
// but you may want to set a classattribute or similar
document.documentElement.setAttribute("data-theme", payload.theme);
}
}, false);
Styling
Under Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded CSS, you can now provide CSS for each mode. E.g., you can override the Discourse styling variables:
So, here it is, slightly updated: