Theme Mode
ThemeMode is a utility to apply theme color modes to specific areas of the page.

Usage

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

It's applied on the top-level of the application for all themes used in it. 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 to invert the current mode in runtime with ThemeMode utility.

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

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

I am using dark mode all the time

Properties

NameTypeDefaultRequiredComment
childrenReactNode-true
modeinverted, dark, lightsmallfalse