Change Global Variant not working

Developer Support
1

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.

2

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 ?

3

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

4

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 ?

5

image
image2022×956 86.9 KB

Here we can see both global variants.

If i change them manually, it works ins studio:

image
image2368×1186 157 KB

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

image
image3420×1800 447 KB

6

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

7

Look, first I define a hook to toggle the theme and save the value in local storage.

// hooks/useUserThemePreference.ts
import { useState, useEffect } from "react";

type ThemeType = "light" | "dark";

function useUserThemePreference(): [ThemeType, (theme: ThemeType) => void] {
  const [theme, setTheme] = useState<ThemeType>(() => {
    if (typeof window !== "undefined") {
      const savedTheme = localStorage.getItem("theme") as ThemeType;
      return savedTheme || "light";
    }
    return "light";
  });

  useEffect(() => {
    if (typeof window !== "undefined") {
      localStorage.setItem("theme", theme);
    }
  }, [theme]);

  return [theme, setTheme];
}

export default useUserThemePreference;

Then, I use that hook to feed the provider:

import { ColorSchemeContext } from "@/components/plasmic/inprodi_design_system/PlasmicGlobalVariant__ColorScheme";
import useUserThemePreference from "@/hooks/useUserThemePreference";
import "@/styles/globals.css"
import { PlasmicRootProvider } from "@plasmicapp/react-web";
import { ConfigProvider, theme } from "antd";
import type { AppProps } from "next/app";
import Head from "next/head";
import { Toaster } from 'sonner';

const { darkAlgorithm } = theme;

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

  return (
    <ColorSchemeContext.Provider value={ theme }>
          <PlasmicRootProvider Head={Head}>
            <Toaster
              richColors
              pauseWhenPageIsHidden
              position="bottom-right"
              toastOptions={{
                duration : 4000
              }}
            />
            <Component {...pageProps} />
          </PlasmicRootProvider>
      </ColorSchemeContext.Provider>
  );
}

If i console.log the “theme” variable, it displays correctly. Even if i hard code “dark” in the value prop of the provider, still not working. Im i missing something? My code is as simple as that.

8

Any response?

9

Hi, could you look if there are multiple ColorSchemeContext.Provider in your application, with your topmost provided not being used because of a provider in your inner component, you can use React devtools to inspect it too.