Gatsby + ThemeProvider StyledComponents has empty theme

I am trying out Gatsby for the first time. I setup my local dev env as I normally would without Gatsby, with a <ThemeProvider /> wrapping the app from the root component. It works great...until I try to run the command to make my app ready for production and serving gatsby build. Then I get the error:

WebpackError: TypeError: Cannot read property 'blue1' of undefined

After more reading, i am told to use the gatsby-ssr.js and gatsby-browser.js files with the wrapRootElement() API. This now fails locally with the same error as when I tried to run the production build script above.

Why are my ThemeProviderProps empty still? I shouldn't have to wrap every component in Layout.

• package.json

"dependencies": {
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.17.4",
    "gatsby-plugin-react-helmet": "^3.1.15",
    "gatsby-plugin-styled-components": "^3.1.11",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-helmet": "^5.2.1",
    "react-inlinesvg": "^1.2.0",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "@types/react-helmet": "^5.0.14",
    "@types/styled-components": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "eslint": "^6.8.0",
    "gatsby-plugin-tslint": "0.0.2",
    "gatsby-plugin-typescript": "^2.1.15",
    "gh-pages": "^2.1.1",
    "tslint": "^5.20.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^4.1.0",
    "typescript": "^3.6.4"
  }

Then the files to be ready by the gatsby-config:

• gatsby-ssr.js
• gatsby-browser.js

import { wrapRootElement as wrap } from "./root-wrapper";

export const wrapRootElement = wrap;

• gatbsy-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-tslint`,
    `gatsby-plugin-react-helmet`
  ]
};

• root-wrapper.js

export const wrapRootElement: FC<Props> = ({ element }) => {
  return (
    <ThemeProvider theme={theme}>
      <Global />
      <Layout>{element}</Layout>
    </ThemeProvider>
  );
};

• src/components/Layout.tsx

    const Layout: FC = ({ children }) => {
      return (
        <>
          <Helmet>
            ...
          </Helmet>
          <>{children}</>
        </>
      );
    };

• src/pages/index.tsx

export default (props: any) => <Home  />;

So when I put a debugger in the Global or Home components, theme is an empty obj {}.

What is happening for local development to make theme empty?