Abdulramon Jemil
I’m creating a widget to be used within my Hashnode blog, a quiz widget, to be precise. It looks something like this.
In the process, I figured honouring the users’ dark/light mode choices would be good, but this currently can’t be done since Hashnode renders widgets using iframes.
Scripts in an iframe can’t directly access their parents if they’re from a different domain. For example, an iframe whose source is https://jemil.blog can’t get access to its parent’s DOM if the parent’s URL isn’t from the same domain. And I found out that hashnode renders widgets from a custom subdomain https://embeds.hashnode.com which, I think, is used to protect from malicious users who might try to exploit the hashnode system, and it’s not much of an issue.
An iframe can access the colour scheme defined within its parent using the prefers-color-scheme CSS media query along with the color-scheme property, as explained in this MDN article. I noticed that Hashnode isn’t using the color-scheme property at all, even if the user switches between light and dark modes, which isn’t very “semantic”. This property tells the browser that the page is rendered darkly. You might also want to check out how this affects Chrome’s auto-dark-theme for users who opt in for it.
I’m suggesting that the Hashnode team does one or both of the following:
  1. Set the _color-scheme_ CSS property to dark when the user opts in for dark mode (by clicking on the icon on the page). By doing this, all other elements on the page inherit the set value, as the _color-scheme_ property is inheritable. This can then be read from within widgets rendered in an iframe using _prefers-color-scheme_, and they can then adjust their styles_,_ thereby honouring the user’s choices.
  2. Set the _color-scheme_ property on the
    div
    s used to wrap the iframe in which widgets are rendered. This also enables widgets rendered in iframes to adjust their styles based on the user's preferred colour scheme.
I hope the Hashnode team considers working on this.
April 28, 2023