Como configurar um tema do modo escuro para o seu site

O Chrome 76 adicionou suporte à consulta de mídia CSS prefere o esquema de cores, que permite que os sites perguntem ao sistema operacional qual esquema de cores você prefere para que eles possam se apresentar adequadamente. Veja como configurá-lo para o seu site.

Quais navegadores suportam temas escuros?

Até o momento, muitos dos principais navegadores suportam o modo escuro, embora alguns navegadores ainda não tenham sido atualizados para suportá-lo. Você pode verificar o status atual em caniuse. com, que gera uma tabela de suporte para diferentes navegadores:

Como sempre, o IE 11 não está recebendo atualizações e os 2% da Internet ainda presos nele não serão capazes de usá-lo. Mas é provável que essas pessoas não estejam no Windows 10 e, portanto, não veriam nenhum uso sem um tema sombrio para alternar.

Felizmente, o uso do esquema de cores preferidas não quebra seu CSS, pois é um parâmetro opcional.

Como usar o suporte ao esquema de cores CSS

Para realmente usar o esquema de cores preferidas em seu CSS, você deve usá-lo como uma consulta de mídia opcional, da mesma maneira que faria para um design responsivo. Por exemplo, se o padrão for fundo branco com texto em preto, você poderá usar a consulta de mídia para mudar para fundo preto e texto em branco.

 body {cor de fundo: #fff; cor: # 000; } @media (prefere esquema de cores: escuro) {cor de fundo: # 000; cor: #fff; } 

Você pode combinar isso com qualquer outra técnica que esteja usando, por exemplo, só poderá permitir o modo escuro em dispositivos móveis se combinar com uma consulta de mídia responsiva para o tamanho da tela.

Configure um tema sombrio com variáveis ​​CSS

Variáveis ​​CSS são uma adição relativamente nova, com amplo suporte. Eles são talvez a maneira mais fácil de criar um tema sombrio ao lado do esquema de cores preferido. Em vez de definir valores de cores manualmente, da seguinte forma:

 body {cor de fundo: #fff; } p {cor: # 000; }[/PRÉ]
 Em vez disso, crie um bloco: root que será aplicado em qualquer lugar. Você pode definir variáveis ​​aqui usando o hífen duplo (-) seguido pelo nome da variável. Então, sempre que precisar definir um valor, use o nome da variável dentro da função var (): 
 
: raiz {--primário: # 000; - fundo: #fff; } corpo {cor de fundo: var (- fundo); } p {color: var (- primário); }[/PRÉ]
 Este método tem o maravilhoso benefício de poder alterar essas variáveis ​​e fazer com que elas reflitam em todos os lugares. Logo abaixo do bloco: root, vamos adicionar outro dentro da consulta de mídia prefere o esquema de cores: 
 
: raiz {--primário: # 000; - fundo: #fff; } @media (prefere o esquema de cores: escuro) {: root {--primary: #ddd; - background: # 222}} body {cor de fundo: var (- fundo); } p {color: var (- primário); }[/PRÉ]
 Isso redefine as variáveis ​​para os valores escuros se o navegador detectar que o usuário prefere um esquema escuro. Você pode gerenciar essas duas paletas de cores e ajustá-las facilmente apenas alterando as variáveis. 
 Além disso, se você precisar de CSS extra para o tema escuro, poderá colocá-lo em outra consulta de esquema de cores preferida, embora você provavelmente queira colocá-lo abaixo do resto do CSS, para que tenha precedência ou use a bandeira! important. 
 Fallback para o IE 11 
 O IE 11 não suporta isso (obviamente). Se você deseja fornecer suporte ao IE 11, pode usar o método antigo de dobrar suas propriedades: 
 
 p {cor: # 000; cor: var (- primária); }[/PRÉ]
 Dessa forma, o IE 11 processará apenas o primeiro e verá o outro como CSS inválido. Temas sombrios não funcionam, mas não funcionariam de qualquer maneira, pois não há suporte para a consulta de mídia. 
 Além disso, se você não quiser usar variáveis ​​CSS, poderá reestabelecer completamente o site na consulta de esquema de cores preferidas, mas esse é desajeitado e desperdiça espaço. Se você precisar oferecer suporte a todos os navegadores existentes, use o fallback de propriedade dupla. 
Via: How to Geek