Change Global Variant not working

I’m a bit confused. I’m trying to implement a light/dark mode in my project. I’m using Codegen and Next.js. So far, I’ve created a global variant in Plasmic Studio called Color Scheme, and it has two variants, “light” and “dark.” My _app.tsx looks like this:

export default function MyApp({ Component, pageProps }: AppProps) {
  const [theme, setTheme] = useUserThemePreference();

  return (
    <ColorSchemeContext.Provider value={theme}>
      <PlasmicRootProvider Head={Head}>
        <Component {...pageProps} />
      </PlasmicRootProvider>
    </ColorSchemeContext.Provider>
  );
}

My “theme” variable does indeed change to “light” or “dark” as selected, but the Plasmic interface never switches to its variant. I don’t know what I’m doing wrong or if there’s a bug with Next.js specifically.

Hi, your code looks right, could you check that you are properly specifying the value of theme with “light” or “dark”, also, could you provide links to make it more clear what is the setup and how the issue is happening ?

I’m quite sure that the “light” and “dark” values are assigned correctly. What kind of links would you need to be able to review this issue in detail? The project ID is: 5nPYJMkHKsudqrrya3SLGq

Could you also provide screenshots of the changes in Studio that you expect to have been updated by the theme provider? Another question, does the preview show the correct behavior when you try different themes ?


Here we can see both global variants.

If i change them manually, it works ins studio:

But in the preview, if the variable is changed programatically it does not shows the changes:

Hi, I can confirm that there is no issue in the generated global contexts, could you check if you have multiple <ColorSchemeContext.Provider> and the wrong one is being referenced ? Also you can directly check with <ColorSchemeContext.Provider value={"dark"}> to see if the issue still persists, is there any way for me to see the generated code that you are using ? You can collaborate with us if possible Collaborating with Plasmic | Learn Plasmic