feat(gatsby-plugin-manifest): add option to remove the "theme color" meta tag (#10440)

Author: ivorpad

packages/gatsby-plugin-manifest/README.md

@@ -207,3 +207,27 @@ module.exports = {
   ],
 }
 ```
+
+## Removing `theme-color` meta tag
+
+By default `gatsby-plugin-manifest` inserts `<meta content={theme_color} name="theme-color" />` tag to html output. This can be problematic if you want to programatically control that tag - for example when implementing light/dark themes in your project. You can set `theme_color_in_head` plugin option to `false` to opt-out of this behaviour.
+
+```javascript:title=gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `GatsbyJS`,
+        short_name: `GatsbyJS`,
+        start_url: `/`,
+        background_color: `#f7f0eb`,
+        theme_color: `#a2466c`,
+        display: `standalone`,
+        icon: `src/images/icon.png`, // This path is relative to the root of the site.
+        theme_color_in_head: false, // This will avoid adding theme-color meta tag.
+      },
+    },
+  ],
+}
+```

packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`gatsby-plugin-manifest Add a "theme color" meta tag if "theme_color_in_head" is set to true 1`] = `
+Array [
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+  <meta
+    content="#000000"
+    name="theme-color"
+  />,
+]
+`;
+
 exports[`gatsby-plugin-manifest Adds "shortcut icon" and "manifest" links and "theme_color" meta tag to head 1`] = `
 Array [
   <link
@@ -17,6 +30,19 @@ Array [
 ]
 `;
 
+exports[`gatsby-plugin-manifest Adds a "theme color" meta tag to head if "theme_color_in_head" is not provided 1`] = `
+Array [
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+  <meta
+    content="#000000"
+    name="theme-color"
+  />,
+]
+`;
+
 exports[`gatsby-plugin-manifest Creates legacy apple touch links if opted in Using default set of icons 1`] = `
 Array [
   <link
@@ -101,6 +127,15 @@ Array [
 ]
 `;
 
+exports[`gatsby-plugin-manifest Does not add a "theme color" meta tag if "theme_color_in_head" is set to false 1`] = `
+Array [
+  <link
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+]
+`;
+
 exports[`gatsby-plugin-manifest Does not add a "theme_color" meta tag to head if "theme_color" option is not provided or is an empty string 1`] = `
 Array [
   <link

packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js

@@ -71,6 +71,7 @@ describe(`Test plugin manifest options`, () => {
       icon: undefined,
       legacy: true,
       plugins: [],
+      theme_color_in_head: false,
     }
     await onPostBootstrap([], {
       ...manifestOptions,

packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js

@@ -14,6 +14,27 @@ describe(`gatsby-plugin-manifest`, () => {
     headComponents = []
   })
 
+  it(`Adds a "theme color" meta tag to head if "theme_color_in_head" is not provided`, () => {
+    onRenderBody(ssrArgs, { theme_color: `#000000` })
+    expect(headComponents).toMatchSnapshot()
+  })
+
+  it(`Does not add a "theme color" meta tag if "theme_color_in_head" is set to false`, () => {
+    onRenderBody(ssrArgs, {
+      theme_color: `#000000`,
+      theme_color_in_head: false,
+    })
+    expect(headComponents).toMatchSnapshot()
+  })
+
+  it(`Add a "theme color" meta tag if "theme_color_in_head" is set to true`, () => {
+    onRenderBody(ssrArgs, {
+      theme_color: `#000000`,
+      theme_color_in_head: true,
+    })
+    expect(headComponents).toMatchSnapshot()
+  })
+
   it(`Adds "shortcut icon" and "manifest" links and "theme_color" meta tag to head`, () => {
     onRenderBody(ssrArgs, { icon: true, theme_color: `#000000` })
     expect(headComponents).toMatchSnapshot()

packages/gatsby-plugin-manifest/src/gatsby-node.js

@@ -23,8 +23,10 @@ exports.onPostBootstrap = (args, pluginOptions) =>
     const { icon, ...manifest } = pluginOptions
 
     // Delete options we won't pass to the manifest.webmanifest.
+
     delete manifest.plugins
     delete manifest.legacy
+    delete manifest.theme_color_in_head
 
     // If icons are not manually defined, use the default icon set.
     if (!manifest.icons) {

packages/gatsby-plugin-manifest/src/gatsby-ssr.js

@@ -31,16 +31,23 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
       href={withPrefix(`/manifest.webmanifest`)}
     />
   )
-
   // The user has an option to opt out of the theme_color meta tag being inserted into the head.
   if (pluginOptions.theme_color) {
-    headComponents.push(
-      <meta
-        key={`gatsby-plugin-manifest-meta`}
-        name="theme-color"
-        content={pluginOptions.theme_color}
-      />
+    let insertMetaTag = Object.keys(pluginOptions).includes(
+      `theme_color_in_head`
     )
+      ? pluginOptions.theme_color_in_head
+      : true
+
+    if (insertMetaTag) {
+      headComponents.push(
+        <meta
+          key={`gatsby-plugin-manifest-meta`}
+          name="theme-color"
+          content={pluginOptions.theme_color}
+        />
+      )
+    }
   }
 
   if (pluginOptions.legacy) {