Definições de cores para mais esquemas de cores claros/escuros

Suporte
1

Olá, gostaria de saber como definir definições de cores para mais de um esquema de cores, ou seja, Claro, Escuro, Dim, semelhante a como o Twitter funciona.

Meu problema atual:
Atualmente, consigo estilizar as cores claras e escuras padrão que não estão listadas, como primary-low, em um componente de tema personalizado, mas não sei como adicionar esse modo de cor personalizado a um esquema de cores diferente.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins};

}
2

Olá :wave:

O Discourse pode lidar com dois esquemas de cores: Claro e Escuro. Portanto, quando você alterna seu dispositivo para o modo escuro, ele usará a configuração do site default dark mode color scheme id por padrão.

Você pode definir paletas de cores mais personalizadas para o Discourse.

Você pode definir novas paletas de cores na página /admin/customize/colors.

ou

Por exemplo, se você usar um tema personalizado, poderá definir isso no arquivo about.json.
Como usamos, por exemplo, no tema FKB Pro.

Nesse caso, ele adicionará essas paletas de cores a /admin/customize/colors.

Quando essas paletas de cores forem adicionadas, os usuários poderão selecioná-las na página de preferências da interface do usuário. Se você habilitá-la.

Screenshot 2024-01-06 at 9.43.56
Screenshot 2024-01-06 at 9.43.56512×134 4.66 KB

dark-light-choose()

O dark-light-choose() só pode lidar com os dois esquemas de cores claro/escuro, não com a paleta de cores. Sugiro usá-lo apenas para criar variáveis de cores personalizadas, não para substituir as padrão. Para substituir as variáveis de cores padrão, você pode fazer o que mostrei acima.

Se o usuário configurar uma paleta de cores diferente do padrão Claro/Escuro do site na página de preferências da interface do usuário, ele usará a variável de cor que você criou com dark-light-choose(), para todas as paletas de cores claras ou escuras para esquemas de cores.

Este é um dos motivos pelos quais criei o seguinte Theme component.

Neste componente de tema, você pode direcionar separadamente os color-scheme="id"s.

Então, o que você pode fazer é :arrow_down_small:

Crie paletas de cores (Clara, Dim, Escura)

Use o componente acima para fazer modificações nas cores do color-scheme="id" Dim ou outras coisas, se necessário.

2 curtidas
3

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