I’ve set up global variants for light & dark mode in Plasmic Studio (currently using CodeGen) and I’m able to control those in my app.tsx.
How do I pass the current theme into plasmic studio so the user can toggle it? I want to be able to see $state.theme showing “light” for example, or a similar end result.
import '@/styles/globals.css';
import { PlasmicRootProvider } from "@plasmicapp/react-web";
import type { AppProps } from "next/app";
import Head from "next/head";
import { useState } from 'react';
import { ThemeContext } from '../components/plasmic/projectname/PlasmicGlobalVariant__Theme'; // Adjust the path if needed
import '../components/styles.css'; // Adjust the path if needed
export default function MyApp({ Component, pageProps }: AppProps) {
const [theme, setTheme] = useState<'light' | 'dark'>('light'); // Initialize theme to 'light'
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<PlasmicRootProvider Head={Head}>
<ThemeContext.Provider value={theme}>
<Component {...pageProps} />
</ThemeContext.Provider>
</PlasmicRootProvider>
);
}