Por que dark-light-choose() pode não funcionar?

Suporte
1

Estou tentando usar a função dark-light-choose($light, $dark) no meu CSS personalizado, mas ela sempre retorna $light, mesmo quando altero o tema de claro (Clara) para escuro (Oscura):

image
image1380×594 39 KB

Forneci mais detalhes sobre minha configuração aqui:

Até agora, verifiquei duas vezes:

  • que a cor primária no meu tema escuro tem maior brilho que a cor secundária.
  • que estou usando os argumentos da função na ordem correta.

Não tenho ideia de como depurar isso. Isso pode ser um problema no meu tema? Existe alguma outra variável que eu deva considerar?

2

Acredito que, devido à forma como o SCSS é compilado, as definições personalizadas de tema escuro/claro precisam ser adicionadas ao color_definitions.scss dentro de um tema e não funcionarão em outros arquivos SCSS.

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

O arquivo color_definitions.scss está no topo da cascata (antes de muitos estilos padrão), então você não deve adicionar a parte .modal.history-modal ins nele. Em vez disso, você pode apenas adicionar a própria definição de cor…

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

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

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

E então, em common ou em qualquer outro arquivo do seu tema, você pode fazer:

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

Muito obrigado, Kris! Você me salvou! Funciona perfeitamente :tada:

Estive experimentando e a única coisa que não entendo é por que a interpolação de variáveis é necessária com valores de cor. Por exemplo, isso não funciona sem interpolação:

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

Mas isso sim:

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

Ambas as versões funcionam se $ins for atribuído a uma variável (por exemplo: $ins: $dark-theme-ins).

O que estou deixando passar?

4

É uma exigência do SCSS ao usar propriedades personalizadas do CSS. Mais detalhes aqui: Sass: Property Declarations