A maioria dos navegadores modernos suporta a capacidade de executar sites no modo claro ou escuro. Blocs possui uma gama de recursos integrados projetados para auxiliar o processo de adição de suporte a temas claros e escuros aos sites que você cria.
Como Funciona
Quando um Blocs site é visualizado em um dispositivo que está executando o sistema operacional no modo escuro, a classe tema escuro será adicionado à tag do corpo da página. Isso é útil porque torna mais fácil estilizar qualquer elemento usando uma classe, especificamente no modo escuro.
Por exemplo, se você tiver um botão com uma classe aplicada .my-botão, para dar ao botão uma aparência diferente no modo escuro, tudo o que você precisa fazer é adicionar uma nova classe usando o Gerente de Classe e nomeie .tema-escuro .meu-botão. Quaisquer valores de estilo adicionados a esta variação especial da classe só terão efeito quando o site for visualizado em um dispositivo em execução no modo escuro.
Classes de tema escuro
Para criar uma versão de tema escuro de qualquer classe, basta clicar com o botão direito na classe no Gerente de Classe e no menu contextual selecione Criar versão de tema escuro. Isso criará uma classe com o nome correto para que seus valores de estilo só tenham efeito quando o site for visualizado no modo escuro.
Modo escuro de visualização
Se você deseja visualizar o estilo do tema escuro do seu site, pode simular o modo escuro do sistema operacional usando a opção do modo escuro do site encontrada no configurações de tela.
Observe que a opção de tela escura do modo de site também afeta o modo de visualização no aplicativo, bem como a tela de design principal.
Exemplo Rápido
Abaixo está um exemplo rápido que cobre o processo de configuração da cor de fundo de um Bloc especificamente para o modo escuro, usando todas as técnicas mencionadas neste post.
