I am a pretty new developer in training and started building a simple website. I had to restart my project because of some issues I was having and honestly felt better starting new.

My issue is in a few things:

Using styled-components theme provider , then I wrapped a global style sheet and a typography sheet and exported that file so that I can use it on gatsby-broswer and gatsby-ssr. The issue is that it seems like some styles are being added while others aren't and the theme isn't actually working, as well as the colors.

in gatsby-browser.js and gatsby-ssr.js ...

export const wrapRootElement = ({ element }) => {
    return <Theme>{element}</Theme>
}

------------------------------------------
... this is a snippet from the actual theme component

export const theme = {
    colors: {
        lightGreen: '#04BFAD',
        lightGreenTint: `rgba(4,191,173,0.70)`,
        lightGreenShadow: `#038073`,
        black: '#0E0F13',
        blackTint: `rgba(14,15,19,0.55)`,
        darkGreen: `#027373`,
        darkGreenShadow: `rgba(2,115,155,0.45)`,
        white: `#fff`,
        lightGrey: `#C1D4D9`,
        lightGreyTint: `rgba(193,212,217,.65)`,
        darkGrey: `#979DA6`
    },
    breakpoints: {
        mobile: `(min-width: 428px)`,
        tablet: `(min-width: 768px)`,
        laptop: `(min-width: 1024px)`,
        desktop: `(min-width: 1280px)`
    }
};

const Theme = ({ children }) => ( 
    <ThemeProvider theme={theme}>
        <GlobalStyles />
        <Typography />
        {children}
    </ThemeProvider>
)

export default Theme;

2. It seems like the gatsby-plugin-google-fonts aint actually importing the font. I want to use Monserrat and have it set up in my gatsby config file and gatsby isn't actually using it

in gatsby-config file
{
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `Montserrat\:400`,
        ],
        display: 'swap'
      }
    }

and a snippet from the Typography component

  html {
    font-family: Montserrat, sans-serif;
    color: ${({ theme : { colors : { lightGrey }}}) => lightGrey};
  }

Can someone point me to the right direction? In my old project, that I still have, I was importing all the files from above to my layout and using wrapPageElement and it was working fine until it stopped working. I use commonjs in my config file.

As a side note: It seems like Gatsby plugin ecosystem is really out of date. I don't have much experience but going to look for ways to contribute somehow. Am I focusing on the wrong tool and should I switch over to nextjs? My goal is to build websites for me and my immediate family and build websites for the businesses in my area and get a new career.