Usa el esquema de color predeterminado si el esquema es oscuro, de lo contrario usa mi color en el tema

Desarrollador
1

Quiero hacer algo como esto

.some-link {
  @if var(--scheme-type) == 'dark' {
    color: var(--primary);
  } @else {
    color: #3b5998;
}

pero, por supuesto, no es posible porque no existe if en CSS y SCSS no se procesa en tiempo de ejecución.

Y, por lo que puedo ver, Discourse no agrega ninguna clase para indicar si el esquema oscuro está activo, y CSS no permite el uso de propiedades personalizadas en los selectores.

¿Alguna idea sobre cuál podría ser la mejor solución alternativa?

2

Creo que esto es lo que estás buscando:

Así que en color_definitions.scss puedes hacer:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

Y luego usarías la nueva propiedad personalizada que cambia entre modo oscuro/claro en tu tema:

body {
  color: var(--my-theme-color);
}
3

¡Genial, parece que funciona :yum:!

Un poco extraño que los parámetros no estén en el mismo orden que el nombre de la función.

Así que debe ser dark-light-choose(#3b5998, $primary).