
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>
  );
}

Usage

import { useTheme } from "reshaped";

In Reshaped, we don't treat light and dark modes as distinct themes; instead, we have a separate definition for colorMode.

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 ensures there's always a straightforward method for toggling modes, even when nesting multiple themes using Theme. Attempt switching the mode in the preceding demo to observe its impact on the rendering of the 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 utilized in Reshaped components such as Tooltip to maintain accessibility of content without introducing extra design tokens.

The color mode applies to the entire application, and its default value can be set using the Reshaped provider. By default, it 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';

<html data-rs-theme="reshaped-light">

Reshaped provider

Related utility

Installation - SSR

Switching themes

useTheme provides a setTheme method, which changes the theme for the closest Theme provider. You can get the currently selected theme name using the theme value.

In case you have multiple themes nested in each other but you want to change the theme of the whole application, use setRootTheme and rootTheme values instead.

const { setTheme } = useTheme();

const handleClick = () => setTheme('slate');

Switching themes this way only works if they're defined as uncontrolled themes, when using defaultTheme in the Reshaped provider or defaultName in the Theme provider.

Arguments and return value

() => ({
  colorMode: "dark" | "light",
  setColorMode: (mode: "dark" | "light") => {},
  invertColorMode: () => {},
  theme: string,
  rootTheme: string,
  setTheme: string,
  setRootTheme: string,
});

useScrollLock

useToggle