¿Por qué podría no funcionar dark-light-choose()?

Soporte
1

Estoy intentando usar la función dark-light-choose($light, $dark) en mi CSS personalizado, pero siempre devuelve $light, incluso cuando cambio la paleta de clara (Clara) a oscura (Oscura):

image
image1380×594 39 KB

Aquí proporciono más detalles sobre mi configuración:

Hasta ahora, he verificado dos veces:

  • que el color primario en mi tema oscuro tenga un brillo mayor que el color secundario.
  • que estoy usando los argumentos de la función en el orden correcto.

No tengo idea de cómo depurar esto. ¿Podría ser un problema en mi tema? ¿Hay alguna otra variable que debería considerar?

2

Creo que, debido a la forma en que se compila el SCSS, las definiciones personalizadas de modo oscuro/claro deben agregarse en color_definitions.scss dentro de un tema y no funcionarán en otros archivos 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

color_definitions.scss está muy arriba en la cascada (antes de muchos de los estilos predeterminados), por lo que no querrás agregar allí la parte .modal.history-modal ins. En su lugar, solo puedes agregar la definición de color en sí…

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

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

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

y luego en common o en cualquiera de los otros archivos de tu tema puedes hacer:

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

¡Muchísimas gracias, Kris! ¡Me has salvado! Funciona a la perfección :tada:

He estado experimentando con ello y lo único que no entiendo es por qué se requiere interpolación de variables con los valores de color. Por ejemplo, esto no funciona sin interpolación:

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

Pero esto sí:

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

Ambas versiones funcionan si $ins se asigna a una variable (por ejemplo: $ins: $dark-theme-ins).

¿Qué es lo que me estoy perdiendo?

4

Es un requisito de SCSS al usar propiedades personalizadas de CSS. Más detalles aquí: Sass: Property Declarations