Como adicionar uma classe de corpo específica para o modo escuro (ou claro)?

Não parece haver nenhuma classe específica no momento.

Encontrei isto, mas não funciona, pois o ID do tema é o mesmo para o modo escuro e claro (que é definido pelo esquema de cores, suponho).

Suponho que um pequeno script possa ajudar? E, talvez adicionar isso ao core do Discourse?

Você se importaria de explicar por que você precisa de classes específicas adicionadas ao body para o modo dark ou light?

Este recurso principal não permite o que você precisa?

A equipe do fórum que estou migrando não gosta de uma variável de cor gerada específica (--tertiary-very-low) que produz esta cor marrom específica:

Eles gostariam de ajustá-la, e parece que não consigo realmente alterá-la, pois ela é gerada E não há uma classe específica para o modo escuro.

No entanto, deparei-me com esta informação:

Não sei se é válido, ainda não consegui testar, tenho muitas coisas para fazer agora :sweat_smile:. Mas se funcionar, resolverá. Na verdade, seria ainda melhor.

2 curtidas

Nós (desculpe, direi nós, pois estou com o @Canapin fazendo os ajustes em nosso fórum) criamos um tema escuro usando a predefinição chamada “Café crème” na versão francesa do Discourse (“café”, presumo) e acabamos de mudar a cor do :heart: para vermelho em vez de marrom.
A coisa estranha com este tema é que os hiperlinks são quase da mesma cor do texto.
Então, quando são um link incorporado, você mal consegue vê-los:


(sim, as duas últimas palavras “cliquez-ici” são um link para uma página da web…)

Então, nossa ideia foi torná-los um pouco marrons, para que se destacassem. Mas quando ajustamos a configuração quaternary na paleta de cores, um monte de cores muda junto: o fundo da “bolha” atrás da DM muda para algo mais próximo de cocô de pássaro do que o marrom mostrado na primeira mensagem do @Canapin. A caixa de mensagem superior também muda (“a caixa de e-mail de saída foi desativada”) para essa mesma cor de cocô de pássaro.

Então, a ideia inicial foi usar o css para colorir os hiperlinks, mas ainda não descobrimos como.

1 curtida

Usar .cooked a como um alvo CSS deve funcionar para você definir uma cor personalizada para esses links.

Embora nosso sistema principal agora permita o uso de escolhas de esquema de cores escuras/claras para seus modos correspondentes, você também deve ser capaz de usar a consulta de mídia CSS para modos escuros/claros, assim:

1 curtida
@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

Fiz o trabalho. Obrigado!

Oops.
Não, não funcionou.

Por favor, corrija-me se estiver errado. O prefers-color-scheme é baseado na preferência do dispositivo, e não no tema real selecionado do Discourse?

No meu dispositivo Windows, defini um tema escuro. Portanto, sites que usam a preferência do meu dispositivo mostrarão, se possível, um tema escuro.

Mas no meu fórum, escolhi deliberadamente usar um tema claro, não um escuro.

A media query prefers-color-scheme ainda é carregada, apesar de eu estar usando um tema claro:

Tema claro, sem modo escuro,

Ainda assim, a regra para o tema escuro é aplicada mesmo assim:

Tela cheia:

1 curtida

Desculpe, interpretei mal que você se referia às configurações do sistema do modo escuro, ativando o modo escuro no fórum.

Então, você pessoalmente usa o esquema de cores claro, mas seus usuários usam o esquema de cores escuro?

A captura de tela anterior mostrava o esquema de cores escuro em ação, mas sua resposta recente afirma que você está usando o esquema de cores claro.

Oi, desculpe, sim, não ficou claro, especialmente porque eu estava falando sobre duas coisas do mesmo tipo, mas com esquemas de cores diferentes. Além disso, foi um pouco confuso para mim.

Então, minha pergunta seria: no Discourse, como sei qual esquema de cores está sendo usado, independentemente das preferências de modo claro/escuro do dispositivo?

Se entendi as coisas corretamente:
Se meu dispositivo (Windows 10) estiver definido como modo escuro, mas eu selecionar um esquema de cores claro no Discourse, a media query (prefers-color-scheme: dark) no CSS do meu fórum retornará algum tipo de “verdadeiro” de qualquer maneira e minhas regras aninhadas serão aplicadas, embora eu tenha escolhido um esquema de cores claro no meu fórum (mesmo que o Windows esteja definido como modo escuro).

Então: como sei, no código HTML do Discourse, se estou usando atualmente um esquema de cores claro ou escuro? Não encontrei nenhuma classe pai como “light-color-scheme” ou “dark-color-scheme”. Portanto, não consigo diferenciar/direcionar esquemas de cores específicos no CSS e criar regras apenas para um ou outro.

1 curtida

Obrigado pelo esclarecimento, agora entendi.

Não adicionamos nenhuma classe ao corpo com base no esquema de cores atualmente selecionado pelo usuário.

Se posso investigar mais, o motivo é que você não gosta da cor que nossas funções de cores geram para --tertiary em seu esquema escuro atualmente selecionado?

O que você gostaria de alcançar através de uma classe de corpo que você sente que não consegue fazer atualmente?

Sim, exatamente :slight_smile:

Agora que leio esta pergunta… não tenho certeza, já que a única maneira de substituir uma cor gerada, até onde sei, é

:root {
  --primary-medium: #666666;
}

Mas sendo um seletor raiz, uma classe no elemento html ou body não poderia direcionar um esquema de cores antes de :root.
Então… não sei.

Mas, em resumo, a ideia seria mudar uma cor gerada específica para um esquema de cores específico. :person_shrugging:

Não é grande coisa se não for possível. Fizemos algumas experiências com as cores do nosso esquema e atualmente estamos satisfeitos o suficiente com as cores geradas. :slight_smile: Poderia ser melhor, mas está longe de ser um grande problema. :slight_smile:

1 curtida

Se desejar, existe uma espécie de solução alternativa oculta.

Você pode criar uma pasta e adicionar apenas um arquivo about.json nela.

Eu fiz isso para criar um esquema de cores solarized light, pois queria especificar minhas próprias variantes, em vez de depender das funções de cores integradas.

Aqui está o arquivo about.json que fiz.

Você então instalaria este “tema”, que por sua vez instalaria este esquema de cores no seu fórum. Nesse ponto, você seria capaz de disponibilizá-lo para uso em outros temas também.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
2 curtidas

Lembro-me de ter visto isso há muito tempo, quando eu trabalhava mais a fundo nas minhas instalações do Discourse!

Definitivamente uma boa solução alternativa. Obrigado. Vou considerar essa a solução adequada, mesmo que possa ser considerada um pouco “hacky”.

1 curtida

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.