Why might dark-light-choose() not work?

[Nacho_Caballero]

I’m trying to use the dark-light-choose($light, $dark) function in my personalized CSS but it always returns $light even if I change the palette from light (Clara) to dark (Oscura):

I give more detail about my setup here:

How to change CSS color for a single theme palette?

Thanks for pointing that out, @Johani. It looks like the dark-light-choose($light, $dark) function does exactly what I want, but my problem now is that it’s not detecting the change of palette. My only active theme is called “Nacho” and it has two palettes: “Clara” (Light) and “Oscura” (Dark): [image] I’ve personalized it with this CSS: $dark-theme-ins: #4da06d; $light-theme-ins: #acf2bd; .modal.history-modal { ins { background: dark-light-choose($light-theme-ins, $dark-theme-in…

So far, I’ve double-checked:

• that the primary in my dark theme has higher brightness than the secondary color.
• that I’m using the function arguments in the right order

I have no idea how to debug this. Might this be a problem in my theme? Is there any other variable that I should consider?

[awesomerobot (Kris)]

I believe, due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files.

color_definitions.scss is high up in the cascade (before a lot of the default styles), so you don’t want to add the .modal.history-modal ins part there. Instead you can just add the color definition itself…

$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

:root {
  --custom-ins: #{$ins};
}

and then in common or any of your theme’s other files you can do:

.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}

[Nacho_Caballero]

Thank you so much, Kris. You saved me! It works perfectly

I’ve been playing around with it and the only thing I don’t understand is why variable interpolation is required with color values. For example, this doesn’t work without interpolation:

$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

But this does:

$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

Both versions work if $ins is assigned a variable (for example: $ins: $dark-theme-ins ).

What am I missing?

[pmusaraj (Penar Musaraj)]

@Nacho_Caballero

the only thing I don’t understand is why variable interpolation is required with color values.

It is a SCSS requirement when using CSS custom properties. More details here: Sass: Property Declarations