useColorMode is a custom hook to switch between light and dark mode of the used theme.
Requires no custom JS logic to handle dark mode colors
Supports server side rendering


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

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 ColorMode to specific parts of the page. 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 Arcade components like Tooltip to avoid introducing additional design tokens while still keeping the content accessible.

Color 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 color mode value with server-side rendering, make sure to pass the className from the theme to the body element.

Arguments and return value