Versión con tema oscuro que hereda el tema claro + anula partes?

Soporte
1

Al principio, estaba satisfecho con un esquema de colores claro y uno oscuro definidos dentro de mi único tema. Sin embargo, hay CSS que me gustaría modificar específicamente cuando se utiliza el esquema de colores oscuro.

¿Existe alguna forma de configurar un tema oscuro como un tipo de tema hijo, de modo que pueda heredar todos los estilos de su tema padre (claro), pero tenga su propio esquema de colores y consista únicamente en sobrescrituras del padre?

¿O algo similar?

2

¿Podrías compartir qué CSS te gustaría modificar específicamente solo para el esquema de color oscuro? En teoría, si se trata solo de colores, puedes hacerlo usando definiciones de color. Si es algo más, necesitarás temas separados (y también tendrías que renunciar al cambio automático del modo oscuro).

3

Editando esta publicación para reflejar todo lo que aprendí de una vez, en lugar de aburrir a los lectores con el proceso:

Ejemplo de CSS que quiero variar entre el modo claro y el modo oscuro:

Modo claro:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

Modo oscuro:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

Me referí a la publicación de @pmusaraj aquí, y tras algunas pruebas, hice lo siguiente:

En common/color_definitions.scss, definí variables para representar el color de fondo y el color de fuente de .nav-pills. Mi modo oscuro no especifica un color de fuente, y mi modo claro no especifica un color de fondo, pero debo especificar algo para que dark-light-choose() funcione, así que utilicé las variables del núcleo de Discourse ($primary y $quaternary-low, respectivamente):

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

:root {
  --custom-nav-pills: #{$nav-pills};
  --custom-nav-pills-bg: #{$nav-pills-bg};
}

Luego, el código relevante en common.scss:


// SCSS de propósito general para ambos modos: oscuro y claro:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

¡Funciona!

4

Esto debería ser common/color_definitions.scss.

Y en common.css, los valores de respaldo son iguales al valor inicial, por lo que podrías simplemente usar:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}
5

Vaya, gracias. He editado mi publicación para corregirlo.

Ah, vale. Había repasado esta publicación demasiado rápido y asumí que era una buena práctica incluir siempre un valor de respaldo. Ahora entiendo que solo es para compatibilidad con versiones anteriores, algo que no necesito. Gracias por la aclaración. He editado el código en mi publicación anterior para reflejarlo.