Skip to content
Last updated

colorMode

Products:RedocRedocRevelRevelReefReefRealmRealm
Plans:ProEnterpriseEnterprise+

Configure the behavior of the color mode UI control and add more color modes.

The default theme (@redocly/theme) includes two color modes: light mode and dark mode. Color modes can be set to a default value, or with the user's operating system preference.

The colorMode option also supports page-level configuration using front matter.

Options

OptionTypeDescription
hidebooleanSpecifies if the color mode selector is hidden. Default false.
ignoreDetectionbooleanSpecifies if the system color mode detection is ignored. Default false.
modes[string]List of possible color mode values. Default to light and dark.

Priority

The color mode is selected for a user based on the following priority from top (highest priority) to bottom (lowest priority):

  • If a user sets a mode it is stored in localStorage. If the mode is in localStorage it's selected.
  • If a user visits and ignoreDetection is not true, the value is detected from the user's operating system (when possible).
  • The first mode in the modes list applies.

Examples

hide example

The following example hides the color mode toggle.

colorMode:
  hide: true

ignoreDetection example

Color mode operating system detection is on by default. The following example ignores the user's operating system color mode.

colorMode:
  ignoreDetection: true

modes list example

Specify the list of available colorMode options in the modes list. You must add a mode to reference it in the modes list. Learn how to add a mode by reading the Add new color modes section.

colorMode:
  ignoreDetection: true
  modes:
    - 'dark-contrast'
    - 'dark'
    - 'light'

The first mode from the modes list applies by default if ignoreDetection is true.

Resources

  • Custom color modes - Add custom color modes beyond light and dark themes for enhanced brand customization
  • Front matter configuration - Use front matter to show or hide the color mode switcher on individual pages for custom layouts
  • Configuration options - Explore other project configuration options for comprehensive documentation and platform customization
 
Next page