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

[Xon]

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:

: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>
}

 

[Xon]

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.

 

[CmptrWz]

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.

 

[XF Bug Bot]

Automated triage: Not a bug

Thank you for reporting this issue. As of XenForo 2.3, every style and style variation sets the color-scheme property from its light or dark style type, so native scrollbars and form controls follow the style. If something still looks wrong on the current version, please post a new report with steps to reproduce.

This is an automated assessment. A member of staff may review and update it.