Cómo cambiar el color CSS para una sola paleta de temas

[Nacho_Caballero]

Actualmente tengo un único tema con dos paletas (una clara y otra oscura). Estoy satisfecho en un 90 % con la paleta oscura, pero en algunos casos me gustaría hacer correcciones.

Por ejemplo, no hay suficiente contraste entre los colores de fondo y de primer plano para los susurros en la paleta oscura:

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

Sé que puedo anular el CSS, pero si lo cambio a var(--primary-light), también afecta a la paleta clara.

¿Existe alguna forma de dirigirse a una sola paleta o la mejor práctica es crear dos temas diferentes, cada uno con su propia paleta?

Mi problema con este segundo enfoque es que tendría que empezar a duplicar muchas otras personalizaciones que no tienen nada que ver con el color.

[Johani (Joe)]

Claro, hay un par de funciones de SCSS que puedes usar para verificar si estás en una paleta de colores clara u oscura.

app/assets/stylesheets/common/foundation/variables.scss

Se usan de la siguiente manera.

@if is-light-color-scheme() {
  // CSS para paleta de colores clara
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS para paleta de colores oscura
  h1 {
    color: red;
  }
}

[Nacho_Caballero]

Gracias por señalarlo, @Johani. Parece que la función dark-light-choose($light, $dark) hace exactamente lo que necesito, pero mi problema ahora es que no está detectando el cambio de paleta.

Mi único tema activo se llama “Nacho” y tiene dos paletas: “Clara” (Light) y “Oscura” (Dark):

Lo he personalizado con este CSS:

$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

Esto funciona con la paleta clara:

Pero no funciona con la paleta oscura:

Si cambio el CSS a esto, funciona:

.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

Así que parece que el cambio a la paleta oscura no se está detectando. Puedo ver que is-light-color-scheme analiza el brillo de $primary y $secondary. Aquí está mi paleta oscura:

Y la paleta clara:

Ya se me han acabado las ideas.

[Nacho_Caballero]

Esto se solucionó aquí: Why might dark-light-choose() not work? - #2 by awesomerobot