Ainda é essa a solução para verificar o modo escuro?

Dev
1

Continuando a discussão de Nenhuma classe específica para o modo escuro:

Tenho um componente de tema que está alterando o logotipo do site com base na categoria em que o usuário está e adicionando logotipos às categorias na barra lateral, e agora eles querem mudar para um logotipo diferente no modo escuro.

Algo como isto:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

Eu sou péssimo em CSS, mas pareceria muito mais fácil se houvesse uma classe “isto-é-modo-escuro”. Ou talvez algo como o acima possa funcionar.

Ou talvez se isso fosse um “verdadeiro” componente de tema com configurações (agora está apenas codificado manualmente como acima), então seria fácil o suficiente colocar essas configurações no CSS. Isso parece o que eu deveria fazer de qualquer maneira, certo?

6 curtidas
2

Coincidentemente, isso é algo que temos discutido internamente esta semana! Alguns PRs de prova de conceito estão aqui:

Observe que estes são apenas experimentos para ajudar em nosso raciocínio - não há garantia de que algum deles será mesclado.

Quanto ao ‘agora mesmo’, a melhor aposta é provavelmente usar o componente <LightDarkImg como este:

8 curtidas
3

Faz sentido. Tive o mesmo problema uma vez, mas @david, isso teria funcionado para mim.
Além disso, as dificuldades na concessão de distintivos seriam consideradas um bug ou outra coisa?

2 curtidas
4

Pode ser um bug, mas precisaríamos de mais detalhes para saber um jeito ou de outro — também é irrelevante para este tópico, então o melhor seria procurar pelo problema e, se não encontrar uma resposta, iniciar um novo tópico detalhando o que você está tentando e onde está falhando.

5 curtidas
5

Uma solução puramente em CSS provavelmente usaria a variável CSS --scheme-type, ou até mesmo a propriedade color-scheme que foi adicionada há algumas horas (oba!), com @container style queries ou light-dark().

Infelizmente, light-dark() só funciona com valores de cor. Você pode tentar usar @container style queries visando a propriedade color-scheme (o Firefox ainda não suporta style queries para propriedades personalizadas). Não consegui testar a ideia, pois meu ambiente de desenvolvimento está fora do ar no momento.

Ter uma classe dedicada .dark-mode ou .light-mode na raiz seria definitivamente o mais fácil de trabalhar.

6 curtidas