Temas

Até mesmo a marca pode ser responsiva. É possível ajustar a apresentação do seu site para corresponder à preferência do usuário. Mas, primeiro, veja como estender a marca do seu site para incluir o próprio navegador.

Personalizar a interface do navegador

Alguns navegadores permitem sugerir uma cor de tema com base na paleta do seu site. A interface do navegador se adapta à cor sugerida. Adicione a cor em um elemento meta chamado theme-color no head das suas páginas.

<meta name="theme-color" content="#00D494">

É possível atualizar o valor de theme-color usando JavaScript. Mas use esse poder com sabedoria. Pode ser confuso para os usuários se o esquema de cores do navegador mudar com muita frequência. Pense em maneiras sutis de ajustar a cor do tema. Se as mudanças forem muito drásticas, os usuários vão sair irritados.

Também é possível especificar uma cor de tema em um arquivo de manifesto do app da Web. Esse é um arquivo JSON com metadados sobre seu site.

Vincule o arquivo de manifesto ao head dos seus documentos. Use um elemento link com um valor rel de manifest.

<link rel="manifest" href="/manifest.json">

No arquivo de manifesto, liste os metadados usando pares de chave/valor.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Se um visitante decidir adicionar seu site à tela inicial, o navegador vai usar as informações no arquivo de manifesto para mostrar um atalho adequado.

Oferecer um modo escuro

Muitos sistemas operacionais permitem que os usuários especifiquem uma preferência por uma paleta de cores clara ou escura, o que é uma boa ideia para otimizar seu site de acordo com as preferências de tema do usuário. É possível acessar essa preferência em um recurso de mídia chamado prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Especifique as cores do tema com o recurso de mídia prefers-color-scheme no elemento meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Também é possível usar o recurso de mídia prefers-color-scheme dentro do SVG. Se você usar um arquivo SVG para o favicon, ele poderá ser ajustado para o modo escuro. Thomas Steiner escreveu sobre prefers-color-scheme em Favicons SVG para ícones do modo escuro.

Temas com propriedades personalizadas

Se você usar os mesmos valores de cor em vários lugares no CSS, pode ser bastante tedioso repetir todos os seletores em uma consulta de mídia prefers-color-scheme.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

Use propriedades personalizadas do CSS para armazenar os valores de cor. As propriedades personalizadas funcionam como variáveis em uma linguagem de programação. É possível atualizar o valor de uma variável sem atualizar o nome dela.

Se você atualizar os valores das propriedades personalizadas em uma consulta de mídia prefers-color-scheme, não será necessário escrever todos os seletores duas vezes.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Consulte Criar um esquema de cores para exemplos mais avançados de temas com propriedades personalizadas.

Imagens

Se você estiver usando SVGs no HTML, também poderá aplicar propriedades personalizadas.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Agora, os ícones vão mudar de cor junto com os outros elementos da página.

Se você quiser diminuir o brilho das imagens fotográficas quando elas forem exibidas no modo escuro, aplique um filtro no CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Para algumas imagens, talvez seja necessário trocá-las completamente no modo escuro. Por exemplo, talvez você queira mostrar um mapa com um esquema de cores mais escuro. Use o elemento <picture> que contém um elemento <source> com a consulta de mídia prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Formulários

Os navegadores oferecem uma paleta de cores padrão para campos de formulário. Informe ao navegador que seu site oferece um modo escuro e um modo claro. Dessa forma, o navegador pode fornecer o estilo padrão adequado para formulários.

Adicione isso ao seu CSS:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

Também é possível usar HTML. Adicione isso no head dos seus documentos:

<meta name="supported-color-schemes" content="light dark">

Use a propriedade accent-color no CSS para estilizar caixas de seleção, botões de opção e alguns outros campos de formulário.

html {
  accent-color: red;
}

É comum que os temas escuros tenham cores de marca suaves. É possível atualizar o valor accent-color para o modo escuro.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

É recomendável usar uma propriedade personalizada para isso, para que você possa manter todas as declarações de cor em um só lugar.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Oferecer um modo escuro é apenas um exemplo de como adaptar seu site às preferências do usuário. Em seguida, você vai aprender a tornar seu site adaptável a todos os tipos de considerações de acessibilidade.

Teste seu conhecimento

Teste seus conhecimentos sobre temas