Seletor de dados para temas

Dev
1

Olá,

Gostaria de propor um seletor de dados para temas, facilitando a edição de temas completos a partir de um Componente.

Não tenho certeza de quão única é a minha situação, mas estou usando um exemplo em que tenho duas instâncias do graceful instaladas, permitindo o uso de paletas escura e clara. Estou utilizando um componente de tema para fazer edições nesses temas remotos, aplicando alterações universais, como modificar o botão de curtir. Tudo funciona muito bem para edições universais controladas pelos estilos, mas o problema surge quando quero fazer uma edição específica para a versão escura que não deve aparecer no tema claro. Não vejo uma maneira de usar CSS para fazer alterações por ID de tema. Para fazer o que desejo atualmente, teria que criar componentes de tema individuais para cada tema para as pequenas modificações que preciso.

Talvez algo como [data-theme-id].

Se isso já for possível, sinta-se à vontade para ignorar minha sugestão. Apenas acho que isso ajudaria muito sites que desejam fazer edições em múltiplos temas sem acumular uma lista enorme de componentes.

2

Não tenho certeza se entendi, mas você pode adicionar algum CSS diretamente nesses temas claro e escuro.

Na minha opinião, os componentes são realmente ótimos para alterações universais como margem, display, preenchimento e largura, mas para cores, a menos que você use variáveis, é melhor editar os temas diretamente.

Parece uma complicação desnecessária de uma solução que já está disponível :thinking:

3

Mas editar temas remotos faz com que suas edições sejam perdidas na próxima atualização, não é?

Isso não se trata apenas de cores, mas de fazer alterações específicas em temas específicos a partir de um único componente, sem precisar criar mais componentes e aplicá-los apenas a alguns temas.

4

Você está certo. Para um tema remoto, você pode usar três componentes:

correção universal do tema para alterações compartilhadas
e correção do tema escuro / correção do tema claro para alterações específicas (como cores). Você pode vincular um componente a apenas um tema.

O “Light graceful” terá a correção universal e a correção do tema claro.
O “Dark graceful” terá a correção universal e a correção do tema escuro.

Como último recurso, você pode adicionar !important a uma linha dessas correções de tema claro/escuro se uma alteração não funcionar.

5

Suponho que você esteja certo. Eu já havia pensado em um componente universal e depois um componente por tema, então três neste exemplo, mas parecia exagero ter três repositórios com o que poderia ter sido facilmente resolvido com um seletor de dados, já que quase tudo no Discourse tem um.

Como observação, o ID do tema está no meta name como um content id, e a palavra-chave é discourse_themes_id. No link para alterar os temas, aparece como [data-id=“#”], pelo menos se eu inspecionar o link do seletor de tema do hambúrguer criado por esse componente instalado aqui no Meta ou em um dos meus sites de teste. Então, não é como se a informação não estivesse disponível no Discourse.

6

Se você adicionar isso à aba de cabeçalho do seu componente de tema

<script type="text/discourse-plugin" version="0.8">
  const themeSelector = require('discourse/lib/theme-selector');
  const currentThemeId = themeSelector.currentThemeId();
  document.body.dataset.themeId = currentThemeId;
</script>

Ele adicionará um atributo data-theme-id à tag <body>, que você pode usar da seguinte forma:

[data-theme-id="1"] {
  // CSS do tema claro
}

[data-theme-id="2"] {
  // CSS do tema escuro
}
7

Neste caso muito específico, você pode ser capaz de usar nossos helpers SCSS. Aqui está um exemplo do core, mas o mesmo deve funcionar em um tema:

Você também pode usar @is-dark-color-scheme

Dessa forma, seu componente não dependerá de theme-ids, que mudarão se você instalar o tema em outro site.

8

Vocês dois são os melhores, muito obrigado :slight_smile: