Temas de cores adaptativas do Vivaldi para programadores web

This post is also available in: English 日本語 Français Deutsch Српски Български 简体中文

Produtos: Vivaldi para computador, Android e iOS.

Os temas de cores adaptativas permitem que as páginas definam a cor usada pela interface do navegador, incluindo a barra de título, barra de separador, barra de endereços, barra de estado e outras. Por exemplo, para aplicar um tema de uma cor verde matcha à interface do navegador:

<meta name="theme-color" content="#8ba888">

O Vivaldi usa o primeiro elemento <meta> com nome, no documento.

A utilização de temas de cores adaptativas está ativada por predefinição. A funcionalidade pode ser desativada por temas personalizados.

No Vivaldi para computador e no Vivaldi para Android, pode definir cores diferentes para os temas claros e escuro, usando as definições apropriadas. Por exemplo, para aplicar um tema de uma cor verde matcha claro em modo claro e um tema de cor verde matcha escuro quando em modo escuro:

<meta name="theme-color" content="#8ba888" media="(prefers-color-scheme:light)">>
<meta name="theme-color" content="#44624a" media="(prefers-color-scheme:dark)">

No Vivaldi para Android e no Vivaldi para iOS, as atualizações dinâmicas às propriedades content são ignoradas. A cor do tema nestas plataformas apenas é definida aquando da inicialização do documento original.

No Vivaldi para computador, pode verificar-se atraso numa situação de mudanças rápidas à cor do tema. Deve garantir que o seu documento não muda a sua cor do tema com muita frequência

A tonalidade ou saturação de algumas cores de temas pode ser ajustada ligeiramente para garantir contraste suficiente com o texto e ícones da barra de ferramentas.