Theme provider

Theme utility is mainly used to create scoped themes. Scoped themes are themes applied only to a specific part of the page. For example, they can be used to create social media share buttons using our Button component.

To achieve this, you can create a custom theme using our Theming CLI and then pass that theme to the Theme.

<Theme name="twitter">
  <Button color="primary" rounded>
    Share
  </Button>
</Theme>

You can find more about how to create your custom themes in our Scoped theming documentation:

Reshaped supports name and defaultName properties to let you apply a custom theme and switch between themes.

defaultName is responsible for the uncontrolled theming behavior. It means that only the initial value of the property is going to be used by the app. All updates to the used theme will then be picked up from the setTheme method from the useTheme hook.

Note that using setTheme inside a Theme scope will only change the theme of the nearest Theme and not for the whole application.

<Theme defaultName="reshaped" />

// Later, inside the application code
const { setTheme } = useTheme();

return <Button onClick={() => setTheme('twitter')} icon={ThemeSwitch} />;

theme is responsible for the controlled theming behavior. It stops reacting to the setTheme method and instead always listens to the property value you pass to the Reshaped provider.

<Theme name="reshaped">

In Reshaped, we don't treat light and dark modes like two different themes. Instead, we have a separate colorMode definition.

It's applied on the top level of the application for all its themes. However, sometimes components might be using dark backgrounds in light mode and vice versa. To avoid supporting inverted color tokens for every theme and increase the theme CSS size, we allow inverting the current mode in runtime with the ColorMode utility.

<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>

Same as inverting the currently used color mode, you can pick dark or light mode to be used all the time.

<Theme colorMode="dark">
  <Card>I am using dark mode all the time</Card>
</Theme>