Até o branding pode ser responsivo. Você pode ajustar a apresentação do seu site de acordo com a 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 que você sugira uma cor de tema com base na paleta do seu site.
A interface do navegador se adapta à cor sugerida. Adicione a cor a um elemento meta com o nome 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.
Os usuários podem ficar sobrecarregados se o esquema de cores do navegador mudar com muita frequência.
Pense em maneiras sutis de ajustar a cor do tema. Se as alterações forem muito desagradáveis, os usuários ficarão perturbados.
Também é possível especificar uma cor de tema em um arquivo de manifesto de app da Web. Esse é um arquivo JSON com metadados sobre seu site.
Vincule o arquivo de manifesto do 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 seus 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 adicionar seu site à tela inicial dele, o navegador vai usar as informações do arquivo de manifesto para mostrar um atalho apropriado.
Oferecer um modo escuro
Muitos sistemas operacionais permitem que os usuários especifiquem uma preferência por uma paleta de cores claras ou escuras,
o que é uma boa ideia para otimizar seu site de acordo com as preferências de temas 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)">
Você também pode usar o recurso de mídia prefers-color-scheme no 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.
Aplicação de temas com propriedades personalizadas
Se você usar os mesmos valores de cor em vários lugares no CSS, pode ser 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 de 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 suas propriedades personalizadas em uma consulta de mídia prefers-color-scheme,
não será necessário gravar 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 Como criar um esquema de cores para ver exemplos mais avançados de aplicação de temas com propriedades personalizadas.
Imagens
Se você usar SVGs no seu HTML, também será possível aplicar propriedades personalizadas.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Agora, as cores dos ícones serão alteradas junto com os outros elementos da página.
Se você quiser diminuir o brilho das suas 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);
}
}
Algumas imagens podem ser trocadas completamente no modo escuro.
Por exemplo, talvez você queira exibir 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 os campos de formulários. Informe ao navegador que seu site oferece os modos claro e escuro. Dessa forma, o navegador pode fornecer o estilo padrão adequado para os formulários.
Adicione o seguinte ao seu CSS:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
Também é possível usar HTML. Adicione isto ao head dos seus documentos:
<meta name="supported-color-schemes" content="light dark">
Use a propriedade accent-color no CSS para definir o estilo das caixas de seleção, dos botões de opção e de alguns outros campos de formulário.
html {
accent-color: red;
}
É comum que os temas escuros tenham cores suaves da marca. Você pode atualizar o valor de accent-color para o modo escuro.
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
Faz sentido usar uma propriedade personalizada para isso, assim você pode manter todas as declarações de cores 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);
}
O uso desse modo é apenas um exemplo de como adaptar seu site às preferências do usuário. Em seguida, você aprenderá a fazer com que seu site se adapte a todos os tipos de considerações de acessibilidade.
Teste seu conhecimento
Teste seus conhecimentos sobre temas
Para fornecer cores de tema que afetam o navegador fora da página da Web, use:
<meta> "theme-color"manifest.json pode ser fornecido e inclui campos para especificar cores de tema a fim de tonalizar a aparência do app sendo aberto na tela inicial de um dispositivo móvel.<meta> de "cor do tema"<head>, evitando flashes de cor indesejados.Para vincular às preferências do sistema do usuário em relação a um tema claro ou escuro, use:
(prefers-color-scheme)Você oferece suporte ao tema escuro, mas todas as entradas do formulário ainda têm tema claro. O que é possível fazer?
html { color-scheme: light dark; } ao CSS.<meta name="supported-color-schemes" content="light dark"> à tag HTML <head>.