Existe uma maneira de detectar o uso do modo escuro?

[ti0]

Existe uma maneira em um plugin / componente de tema para detectar se o tema atual está usando o modo escuro?
Alternativamente, existe uma maneira de obter o ID do tema ativo?
Ou devemos criar componentes de tema diferentes para temas claros e escuros?

[Don]

@ti0

detect if the current theme is using dark mode

Olá,

Acho que existem algumas maneiras de conseguir isso.
Você pode usar isto

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.

Ou isto

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(…

---

Adoro a seção Tópicos Relacionados do Discourse Ai , é muito mais fácil organizar e encontrar tópicos.

[Lilly (Lillian Louis)]

pessoalmente, prefiro ter temas escuros e claros separados, em vez de modos escuro e claro de um tema. acho que alguns usuários acham essa opção extra confusa. eu apenas crio versões de temas claras e escuras e as coloco no menu hambúrguer, mas tenho apenas 4 temas ativos (já fiz temas especiais por tempo limitado, por exemplo, tivemos temas claros e escuros do Masters Golf para o torneio). basta acompanhar as paletas de cores.

[ti0]

Resolvi isso adicionando uma única linha de código à seção Head de cada tema, dependendo das cores:

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

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

Obrigado pelas suas contribuições @Don @Lilly