useThemeMode
useThemeMode is a custom hook to switch between light and dark mode of the used theme.

Usage

In Arcade, we don't treat light and dark modes like two different themes, instead we have a separate "mode" definition.

Mode: light

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

I am using the current theme mode
I am using the inverted theme mode

Inverted theme mode is a concept that we use in Arcade components like Tooltip to avoid introducing additional design tokens while still keeping the content accessible.

Theme mode is applicable for the whole application, so its default value can be set using Arcade provider. By default, the value is set to light mode.

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

Arguments and return value