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

Support

AI-generated summary

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

Nacho_Caballero is having trouble with the dark-light-choose($light, $dark) function in their personalized CSS, always returning the $light value even when switching to a dark theme.

awesomerobot suggests that custom dark/light definitions need to be added to color_definitions.scss within a theme, and provides an example of how to define the colors and use them in other files.

Nacho_Caballero confirms that this solution works, but is unsure why variable interpolation is required when using CSS custom properties with color values.

pmusaraj explains that this is a SCSS requirement when using CSS custom properties, and points to the Sass documentation for more details.

1

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

image
image1380×594 39 KB

I give more detail about my setup here:

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?

2

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.

Screen Shot 2020-12-04 at 9.54.13 PM
Screen Shot 2020-12-04 at 9.54.13 PM936×138 14.1 KB

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);
    }
}
3

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

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?

4

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