如何在Gatsby.js中更改移动浏览器上的地址栏颜色

Question

我想改变地址栏的颜色为网站，这是建立与Gatsby.js。

我所想到的只是修改了“gatsby-config.js”中的“sitemetadata”部分。有意义吗？在这里输入图像描述

Answer 1

您可以使用页面的head中的meta标记theme-color更改移动Android上的颜色，例如。

<meta name="theme-color" content="#123456">

有关其他浏览器的更详细讨论，请参见https://stackoverflow.com/a/33193739/1247853。

如果您正在使用gatsby-starter-blog或gatsby-starter-default，则可以在gatsby-config.js中设置此元标记：

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
        theme_color: `#123456`,
        ...
      },

  import { Helmet } from "react-helmet"

  return (
    <Helmet
      meta={[
        {
          name: `theme-color`,
          content: '#123456',
        },
      ]}>
   // ... rest of the page ...
   </Helmet>
 )