A maneira correta de editar CSS para modos claro e escuro

Suporte
1

Preciso editar um monte de CSS para os modos claro e escuro. Li alguns posts no fórum que dizem que não há uma maneira confiável de fazer isso, incluindo

No entanto, muitos desses são posts antigos. Existe uma maneira fácil em 2026? Testei usando isso:

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

Mas não tenho certeza se está correto, embora funcione.

2

A consulta de contêiner funcionará, mas para simplificar, você também pode usar a função nativa light-dark() do CSS para isso:

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

Geralmente, no Discourse, dependemos de variáveis de cor que mudam automaticamente para evitar definir cores específicas dessa maneira (--primary, --secondary, etc.)… isso permite que as cores funcionem independentemente do esquema de cores.

Você pode ver alguns exemplos aqui: https://meta.discourse.org/styleguide/atoms/colors e como elas mudam se você alternar para os modos escuro/claro. Essas variáveis são configuradas por paletas de cores em /admin/config/colors

3

Incrível, muito obrigado, Kris. A propósito, esse link não funciona.