Indicate if a style is dark or light for scroll-bars to match

X

Xon

Well-known member
Affected version
2.2.13
Sites such as Google and MDN Web Docs style the scrollbar according to the user's light/dark mode preference on said websites via the use of the color-scheme CSS property. XF has it defined if a style is light or dark, but this is not pushed thought to the CSS.

Ie something like this:
XML: 
:root {
<xf:if is="property('styleType') === 'dark' ">
    color-scheme: dark;
    // This is stupid, but fixes iframes for ads/embeds being not-transparent.
    iframe {
        color-scheme: light;
    }
<xf:else />
    color-scheme: light;
</xf:if>
}
 
Last edited:
Found out the "fun" way that iframes are transparent by default, unless their color-scheme doesn't match the document they're embedded in, at which point they get a white or black background as appropriate. The default is the "light" color-scheme.
 
As a note, we've also discovered that some browsers (FireFox at a minimum) will change the default selection colors when color-scheme is set to dark.

This isn't a problem if custom ::selection/::-moz-selection styling is in place, but can cause minor confusion for some users.
 
Back
Top Bottom