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, 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. This means that only the initial value of the property is 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} />;

The theme property 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 as two different themes. Instead, we have a separate colorMode definition.

It's applied at the top level of the application for all its themes. However, sometimes components might use 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 at 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>

Similar to inverting the currently used color mode, you can choose dark or light mode to be used consistently.

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