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

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);
    }
}
8 Likes