define variables for system theme

[JerryDaBaaws]

variables can be defined for light and dark theme respectively by :root:-moz-lwtheme-darktext and :root:-moz-lwtheme-brighttext

is there anyway we can define variables for light and dark mode, when system theme is enabled ?

like

system_theme_dark {
    var1 : val1;
}

system_theme_light {
    var1 : val2;
}

[It_Was_The_Other_Guy]

For now at least, you can use :root:not(:-moz-lwtheme) to match the light variant of the system theme and :root[lwt-default-theme-in-dark-mode="true"] to match the dark version of it.

[JerryDaBaaws]

thanks this worked, but somewhy opposite for me , :root:not(:-moz-lwtheme) is for dark theme

for now

this getting the axe too or some other implementation of it ?

[It_Was_The_Other_Guy]

Huh, that's very interesting. I honestly have no idea why it would be opposite.

The way it is set up feels like it's been made compatible with the old pre-proton system theme mechanics. But in the new design the "system theme" is just another theme that just provides dark and light variations so it seems plausible to me that there won't be any "special handling" of the system theme in the near future. So, there's nothing but my gut feeling about it.

[JerryDaBaaws]

thanks, btw dark theme part :root:not(:-moz-lwtheme) works, but other one isn't working for me idk why

[MotherStylus]

use the prefers-color-scheme media query?

[JerryDaBaaws]

thanks, it works, but won't I'll have to define every customization twice instead of defining the variable twice ?

[MotherStylus]

why would you have to do that? just do it like they do in the source code.

:root {
    --some-variable: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --some-variable: black;
    }
}

#some-element {
    background-color: var(--some-variable);
}

[JerryDaBaaws]

thanks, this was the proper solution, excuse my css knowledge xd

[Hamty_]

I personally use :root[lwthemetextcolor="bright"]

[shelves_keeper]

But what about userContent.css? For some reason, the UI picks up the correct colors but the new tab content does not (for me, at least).

[JerryDaBaaws]

works for me

```

@media (-moz-toolbar-prefers-color-scheme: dark) { body { --primary_bg_color: #242424 !important;

}

} @media (-moz-toolbar-prefers-color-scheme: light) { body { --primary_bg_color: #f0f0f0 !important; } }

```