¿Hay alguna forma de detectar el uso del modo oscuro?

[ti0]

¿Hay alguna forma en un plugin / componente temático de detectar si el tema actual está utilizando el modo oscuro?
Alternativamente, ¿hay alguna forma de obtener el ID del tema activo?
¿O deberíamos crear diferentes componentes temáticos para temas claros y oscuros?

[Don]

@ti0

detectar si el tema actual está usando el modo oscuro

Hola,

Creo que hay algunas formas de lograr esto.

Puedes usar esto

No specific class for dark mode

Would this accomplish what you need? this would need to be added to color_definitions.scss @if #{schemeType()} == dark { body { background: red; } } @else { body { background: blue; } } A class does seem like it would be useful though, we can probably add one.

O esto

Why might dark-light-choose() not work?

I believe, due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files. [Screen Shot 2020-12-04 at 9.54.13 PM] color_definitions.scss is high up in the cascade (before a lot of the default styles), so you don’t want to add the .modal.history-modal ins part there. Instead you can just add the color definition itself… $dark-theme-ins: #acf2bd; $light-theme-ins: #4da06d; $ins: dark-light-choose(…

---

Me encanta la sección Temas Relacionados de Discourse Ai es mucho más fácil organizar y encontrar temas.

[Lilly (Lillian Louis)]

personalmente prefiero tener temas oscuros y claros separados, en lugar de modos oscuros y claros de un tema. creo que a algunos usuarios les resulta confuso ese menú desplegable adicional. yo solo creo versiones de temas claras y oscuras y las pongo en el menú hamburguesa, pero solo tengo 4 temas activos (aunque he hecho temas especiales de tiempo limitado, por ejemplo, tuvimos temas claros y oscuros del Masters de Golf para el torneo). solo hay que llevar un registro de las paletas de colores.

[ti0]

Lo resolví añadiendo una sola línea de código a la sección Head de cada tema, dependiendo de los colores:

document.body.classList.add(“dark-theme”);

document.body.classList.add(“light-theme”);

Gracias por sus aportaciones @Don @Lilly