Alex_P
(Alex P.)
Maio 23, 2021, 10:49am
1
Quero fazer algo assim
.some-link {
@if var(--scheme-type) == 'dark' {
color: var(--primary);
} @else {
color: #3b5998;
}
mas, claro, isso não é possível porque não há if no CSS e o SCSS não é processado em tempo de execução.
E, pelo que consigo ver, o Discourse não adiciona nenhuma classe para indicar se o esquema escuro está ativo, e o CSS não permite propriedades personalizadas em seletores.
Alguma ideia de qual seria a melhor solução alternativa?
Acho que é disso que você está procurando:
Então, em color_definitions.scss, você pode fazer:
$my-theme-color: dark-light-choose($primary, red);
:root {
--my-theme-color: #{$my-theme-color};
}
e, em seguida, você usaria a nova propriedade personalizada de alternância entre modo escuro/claro no seu tema:
body {
color: var(--my-theme-color);
}
Alex_P
(Alex P.)
Maio 25, 2021, 5:21am
3
Uhu, parece que funciona
Um pouco estranho que os parâmetros não estejam na mesma ordem que o nome da função.
$darkness
) {
@if dc-color-brightness($adjusted-color) <
dc-color-brightness($comparison-color)
{
@return scale-color($adjusted-color, $lightness: $lightness);
} @else {
@return scale-color($adjusted-color, $lightness: $darkness);
}
}
@function dark-light-choose($light-theme-result, $dark-theme-result) {
@if is-light-color-scheme() {
@return $light-theme-result;
} @else {
@return $dark-theme-result;
}
}
@function is-light-color-scheme() {
@if dc-color-brightness($primary) < dc-color-brightness($secondary) {
@return true;
Então precisa ser dark-light-choose(#3b5998, $primary)