useTheme

Requires no custom JS logic to handle dark mode colors
Supports server side rendering


Usage

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

This means there is always an easy way to toggle the modes even if you're nesting multiple themes into each other using ThemeProvider. Try switching the mode in the previous demo and see how it affects the rendering of these cards:

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.

To support the color mode value with server-side rendering, pass the className from the theme to the body element.

Arguments and return value