XF 2.3 Style variation "system" and "light" show different results

[Sysnative]

I'm trying to set some styling specific to the "Light" version of our theme - this is working fine when "Light" is explicitly selected for a logged in user, but anytime the style variation setting is set to "System", the styling disappears.

#XF[data-color-scheme="light"] div.structItemContainer-group > div:nth-of-type(even) {
    background: #f1f1f1;
}
#XF[data-color-scheme="light"] div.structItemContainer-group > div:nth-of-type(odd) {
    background: #F8F8F8;
}

Is there a different way this should be handled?

 

[Jeremy P]

Yeah:

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

 

[Sysnative]

I saw that post originally - but how would I set this to remove rules already set?

The CSS rules only apply to the "light" variant (aka default) - I want there to be no extra CSS applied for the dark variant, rather than explicitly overriding this back to the defaults.

 

[Jeremy P]

I haven't tested this just yet, let me know if it helps:

div.structItemContainer-group > div:nth-of-type(even)
{
    background: #f1f1f1;

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        background: unset;
    });
}

 

[Sysnative]

Thanks! That seems to work.

Preference would also be for the #XF[data-color-scheme="light"] method to work as well - load any "light" variables if the system default is light.

 

[Jeremy P]

The data-color-scheme attribute is for explicit variations only, the server cannot include it for the system variation ahead of time as the client preference isn't exposed to the server (and may change while the page is actively rendered).

You could manually include a @media (prefers-color-scheme: light) rule guarded by an empty data-color-scheme check, but that's essentially what the mixin does for you.

Which is to say, you could also do this I guess:

div.structItemContainer-group > div:nth-of-type(even)
{
    .m-colorScheme(light,
    {
        background: #f1f1f1;
    });
}