Forma correcta de editar CSS para modos claro y oscuro

Soporte
1

Necesito editar un montón de CSS para los modos claro y oscuro. He leído varias publicaciones en el foro que dicen que no hay una forma fiable de hacerlo, incluyendo

Sin embargo, muchas de estas publicaciones son antiguas. ¿Hay alguna forma fácil en 2026? He probado usando esto:

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

No estoy seguro de si esto es correcto, pero funciona.

2

La consulta de contenedor funcionará, pero para simplificar, también puedes usar la función nativa light-dark() de CSS para lograrlo:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

Por lo general, en Discourse confiamos en variables de color que cambian automáticamente para evitar establecer colores específicos de esta manera (--primary, --secondary, etc.)… esto permite que los colores funcionen independientemente del esquema de color.

Puedes ver algunos ejemplos aquí: https://meta.discourse.org/styleguide/atoms/colors y cómo cambian si alternas entre los modos oscuro y claro. Estas variables se configuran mediante paletas de color en /admin/config/colors

3

Genial, muchas gracias, Kris. Por cierto, ese enlace no funciona.