面向 Web 开发人员的 Vivaldi 自适应主题颜色

This post is also available in: English 日本語 Français Deutsch Српски Português Български

产品:Vivaldi 桌面版、Android 版和 iOS。

自适应主题颜色允许网页在浏览器镶边中设置主题色,包括标题栏、标签栏、地址栏、状态栏等。 例如,要将浅抹茶绿色主题应用于浏览器镶边:

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

Vivaldi 使用文档中的第一个命名 <meta> 元素。

默认情况下,自适应主题颜色处于启用状态。 该功能可能会被自定义主题禁用。

在 Vivaldi 桌面版和 Vivaldi Android 版中,您可以使用适当的媒体查询为浅色和深色主题颜色首选项设置不同的颜色。 例如,要在浅色模式下应用浅抹茶绿色主题颜色,在深色模式下应用深色抹茶绿色主题颜色:

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

在 Vivaldi for Android 和 Vivaldi for iOS 中,将忽略属性的 content 动态更新。 这些平台上的主题颜色仅在初始文档初始化期间设置。

在 Vivaldi 桌面版中,主题颜色的快速更改可能会延迟。 您应该确保您的文档不会过于频繁地更改其主题颜色

某些主题颜色的色调或饱和度可能会稍作调整,以确保与工具栏文本和图标有足够的对比度。