When creating themes using reshaped.config.js, all your themes are built when you run the CLI command. You get CSS files as an output and then you can statically import them in your product code to apply.
In some cases you might want your themes to be more dynamic and update right as user works with the product. Here are a few examples:
For these cases you can use our theming API right in both front-end and/or back-end code.
import { getThemeCSS } from "reshaped/themes"; const css = getThemeCSS("myTheme", { color: { foregroundNeutral: { hex: "#2c3e50", hexDark: "#ecf0f1" }, }, });
You can use the returned css value to either form a server response containing css or you can render it right in your React code. The theme you create becomes immediately available for the Reshaped and/or Theme providers:
function Demo() { const [customTheme, setCustomTheme] = React.useState(false); const css = customTheme && getThemeCSS("myTheme", { color: { backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" }, backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" }, }, }); return ( <> {css && <style>{css}</style>} <Theme name={customTheme ? "myTheme" : "reshaped"}> <View gap={4} align="start"> <FormControl> <View direction="row" gap={2}> <Switch name="theme" onChange={() => setCustomTheme((prev) => !prev)} /> <FormControl.Label>Toggle custom theme</FormControl.Label> </View> </FormControl> <Button color="primary">Primary button</Button> </View> </Theme> </> ); }