How to change address bar color on mobile browsers in Gatsby.js

Question

I would like to change address bar color for the site, which is built with Gatsby.js.

All I came up with was the modification of the "siteMetadata" section in "gatsby-config.js". Does it make any sense?enter image description here

Answer 1

You can change the color on mobile Android using the meta tag theme-color in the head of your page, e.g.

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

See https://stackoverflow.com/a/33193739/1247853 for a more in-detail discussion about other browsers.

If you are using the gatsby-starter-blog or the gatsby-starter-default you can set this meta tag in gatsby-config.js:

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

If you are not using these starters, you can use React Helmet. Install it by following the instructions on https://www.gatsbyjs.org/docs/add-page-metadata/ , then place the following code somewhere that is executed on every page, e.g. in src/components/layout.js

  import { Helmet } from "react-helmet"

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