Color Mode

ColorMode is a utility to apply theme color modes to specific areas of the page.
Applies chosen color mode to the target scope
Supports dynamically inverting current color mode


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 ColorMode utility.

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


modeinverted, dark, lightsmallfalse