function Example() { const { setColorMode, invertColorMode, colorMode } = useTheme(); return ( <View align="center" gap={3}> <View.Item>Current color mode: {colorMode}</View.Item> <Button onClick={invertColorMode}>Invert color mode</Button> </View> ); }
import { useTheme } from "reshaped";
In Reshaped, we don't treat light and dark modes like two different themes; instead, we have a separate colorMode definition.
function Example() { const { setColorMode, invertColorMode, colorMode } = useTheme(); return ( <View direction="row" align="center" gap={3}> <View.Item>Mode: {colorMode}</View.Item> <Button onClick={invertColorMode}>Invert mode</Button> <Button onClick={() => setColorMode("dark")}>Switch to dark mode</Button> </View> ); }
This means there is always an easy way to toggle the modes even if you're nesting multiple themes into each other using Theme. Try switching the mode in the previous demo and see how it affects the rendering of these cards:
<View gap={3} direction="row"> <Card>I am using the current color mode</Card> <Theme colorMode="inverted"> <Card>I am using the inverted color mode</Card> </Theme> </View>
Inverted color mode is a concept that we use in Reshaped components like Tooltip to avoid introducing additional design tokens while keeping the content accessible.
Color mode is applicable for the whole application, so its default value can be set using Reshaped provider. By default, the value is set to light mode.
<Reshaped defaultColorMode="dark" />
To support the color mode value with server-side rendering, pass the className from the theme to the body element.
import 'reshaped/themes/reshaped/theme.css'; <body data-rs-theme="reshaped-light">
() => ({ colorMode: "dark" | "light", setColorMode: (mode: "dark" | "light") => {}, invertColorMode: () => {}, });