XF 2.3 CSS command to determine Light or Dark theme?

[CZ Eddie]

I need to change the header background based on whether the light or dark mode is currently in use.
Each of the two requires a different color header.

This isn't working for me:

/* Light theme - Change header background color */
[data-theme="light"] .p-header, [data-theme="light"] .p-header-inner {
    background-color: #bdad7b !important;
}

/* Dark theme - Revert to original header color */
[data-theme="dark"] .p-header, [data-theme="dark"] .p-header-inner {
    background-color: #2f2f2f !important; /* Replace with the original dark theme color if different */
}

 

[Jeremy P]

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

• 
•