Hello everyone,
I’ve spent the last few hours trying to synchronize the Dark Mode of a Ghost blog with a Discourse embedding. While I have successfully managed to detect the Dark Mode state on the host site and pass the correct parameters, Discourse seems to ignore them for anonymous users.
Our Setup & What we have verified:
Parameter Injection: We are using a custom script in Ghost to detect the data-color-scheme=“dark” attribute. We have verified via the browser console and the Network Tab that the parameters ?color_scheme_id=13 (our Palette 13) or ?theme_id=4 (a dedicated Dark Theme) are correctly appended to the embed.js request and subsequently to the Iframe src.
Theme Configuration: In Discourse, the target Theme (ID 4) and the Color Scheme (ID 13) are both marked as “User Selectable”. The Color Scheme is also set as the “Default Dark” for the active theme.
The Issue: Despite the Iframe URL clearly showing …/embed/comments?topic_id=…&theme_id=4, the rendered content remains in the Light Mode (Default) for anonymous visitors.
Tests performed:
Hardcoding the theme_id directly into the script.
Manually manipulating the Iframe src via JavaScript after the embed.js has finished loading.
Attempting to use @media (prefers-color-scheme: dark) within a Theme Component to force styles, which also seems to be ignored or overridden in the embed context.
My Question: Is there a specific security setting or a hardcoded limitation in the Discourse embedding logic that prevents anonymous users from switching themes or color schemes via URL parameters?
We want to avoid a “Flash of unstyled content” and ensure that readers on a dark blog post don’t get blinded by a white comment section. Are there any app.yml settings or hidden site settings that govern this behavior for embedded content?
Discourse Version: Discourse 3.5.3
Thanks in advance for any insights!