Tema escuro

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 tudo 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 .dark-theme .my-button. 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.

Dica para iniciantes

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.

Atualizado em 28 de setembro de 2021

Esse artigo foi útil?

Artigos Relacionados