使用 Web 应用清单指定网站级主题颜色

Chrome 于 2014 年为您的网站引入了主题颜色的概念。主题颜色是来自网页的提示,用于告知浏览器应使用哪种颜色为地址栏等界面元素着色。

例如,下方是采用和未采用主题颜色的此网站。

主题颜色
主题颜色

问题在于,您必须在每个网页上定义主题颜色,如果您有一个大型网站或旧版网站,那么对网站进行大量更改并不总是可行的。

从 Chrome 46(2015 年 9 月 Beta 版)开始,在清单中添加 theme_color 属性后,当网站从主屏幕启动时,系统会自动将该颜色应用于网域上用户访问的每个网页。

如果您的页面已有 theme-color 元标记(例如 <meta name="theme-color" content="#2196F3">),系统将使用网页级配置,而不是清单中的值。

只需将 theme_color 属性添加到清单中并指定 HTML 颜色即可。

    "theme_color": "#2196F3"

如需查看实际操作效果,请访问 Airhorner - 全世界最好的气笛,并将其添加到主屏幕。或者查看网站的清单

常见问题解答

  • 如果我的网站不是从主屏幕启动的,这是否适用?
    可以。
  • 这种情况是否适用于我的整个网站,比如用户只是浏览时?
    目前不太可能这样做,这意味着浏览器必须更频繁地下载清单,目前它属于低优先级资源。它旨在在用户将网站添加到主屏幕时解析。