Incorrect usage of plasmic global variant.

Issues
1

I created a global variant in plasmic but it’s not clear how I can use it in a button for the user to choose the theme, see where I’m stuck:
// @ts-nocheck
/* eslint-disable */
/* tslint:disable */
/* prettier-ignore-start */

import * as React from "react";
import * as p from "@plasmicapp/react-web";

export type ThemeValue = "dark";
export const ThemeContext = React.createContext<ThemeValue | undefined>(
"PLEASE_RENDER_INSIDE_PROVIDER" as any
);

export function useTheme() {
return React.useContext(ThemeContext);
}

export default ThemeContext;
/* prettier-ignore-end */

import 'styles/globals.css'
import { PlasmicRootProvider } from "@plasmicapp/react-web";
import type { AppProps } from "next/app";
import Head from "next/head";
import ThemeContext from '@/components/plasmic/leakim/PlasmicGlobalVariant__Theme';

export default function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeContext.Provider value={theme}>
<PlasmicRootProvider Head={Head}>
<Component {...pageProps} />
</PlasmicRootProvider>
</ThemeContext.Provider>
);
}

Could anyone help me with this, I’m racking my brain, maybe I’m going in the wrong place.

2

Hi @willing_spider! You need to manage the state of the global variant and pass to the context provider.

An example starting from your code is:

export default function MyApp({ Component, pageProps }: AppProps) {
  const [theme, setTheme] = React.useState("dark");
  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };
  return (
    <ThemeContext.Provider value={theme}>
      <PlasmicRootProvider Head={Head}>
        <Component {...pageProps} />
      </PlasmicRootProvider>
      <Button onClick={toggleTheme}>Toggle theme</Button>
    </ThemeContext.Provider>
  );
}

If you are using something else to manage state (like mobx, redux etc), that can work as well.