As of v12, themes are no longer LESS based or come precompiled. Now themes use CSS variables. Without using <ThemeProvider/> only basic styles will be rendered.
Tells the provider to override global CSS variables if true. If false, creates a scope and wraps content in a span element with the CSS variables. This is useful if you have a component subtree that you want to be a different theme than the root components.
importReact,{useState}from"react";import{render}from"react-dom";import{ThemeProvider,Button}from"photoncss/react";import"photoncss/dist/photon.css";// Define array of themes that can be toggled throughconstthemes=["default.light","default.dark"];exportdefaultfunctionRoot(){// Initialize theme stateconst[themeId,setThemeId]=useState(parseInt(localStorage.getItem("themeId")||"0"));// Define function to increment themefunctionnextTheme(){// Iterate to next theme in array or reset to first itemletnextThemeId=themeId+1;if(nextThemeId>=themes.length)nextThemeId=0;// Save theme id and change statelocalStorage.setItem("themeId",nextThemeId);setThemeId(nextThemeId);}// Render componentreturn(<ThemeProviderglobaltheme={themes[themeId]}><Buttonvariant="raised"color="primary"onClick={nextTheme}>Switchto{themeId===1?"light":"dark"}theme</Button></ThemeProvider>);}// Wait for the DOM to load before renderingdocument.addEventListener("DOMContentLoaded",function(){// Append a container to the DOM to render content intoconstroot=document.createElement("DIV");root.id="root";document.body.append(root);// Render root component into react-root containerrender(<Root/>,document.getElementById("root"));});