Changing top-level theme in Gatsby

[jdpaterson]

Hi I have an issue when changing theme in Gatsby.

If I do something like:

const MyComponent = () => {
  const [currentTheme, setCurrentTheme] = useState(defaultTheme)
  return (
    <ThemeProvider theme={currentTheme} >
      ....some component that calls setCurrentTheme
    </ThemeProvider>
  )
}

It seems to change some of the colors but alot of the properties that are "inherit" don't update with the new theme values.
This is different than setColorMode because I actually want to change the fonts etc.. as well.

I assume this is because I am only changing the theme of the nested ThemeProvider but not the top-level ThemeProvider which Gatsby uses.

Am I missing something or is there some Gatsby way to accomplish this?

Looking at the source code I think I could accomplish this if useThemeUI() consumer passed a setTheme() function which would give me access to update the theme at the root ThemeProvider.

[atanasster]

Hi @jdpaterson - the theme should be updated as long as you have your ThemeProvider at the top level (and the new theme has all the same fields as the inherited theme). Are you using the gatsby-theme ? Do you have a repro that we can take a look at?

[jdpaterson]

Hey @atanasster thanks for the reply.

Sure, you can check-out a demo here: https://jpatersondevmain.gtsb.io/blog/jubuntu-my-docker-work-environment .
And my repo here: https://github.com/jdpaterson/jpaterson.dev, specifically these files:
https://github.com/jdpaterson/jpaterson.dev/blob/main/src/components/Layout/Layout.jsx
https://github.com/jdpaterson/jpaterson.dev/blob/main/src/components/Nav/Nav.jsx
And the gatsby-plugin-theme-ui: https://github.com/jdpaterson/jpaterson.dev/blob/main/src/gatsby-plugin-theme-ui/index.js

If you change the theme at the top-right there are two main things that aren't working as I would expect. First is that the nav-bar text is not changing. Maybe that's because I'm using NavLink component .

But main issue is if you change to a dark theme like "deep", the text throughout the page does not change to a light colour.

Thanks