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.
| Option | Type | Description |
|---|---|---|
| hide | boolean | Specifies if the color mode selector is hidden. Default: false. |
| ignoreDetection | boolean | Specifies if the system color mode detection is ignored. Default: false. |
| modes | [string] | List of possible color mode values. Default: |
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
modeit is stored inlocalStorage. If the mode is inlocalStorageit's selected. - If a user visits and
ignoreDetectionis nottrue, the value is detected from the user's operating system (when possible). - The first mode in the
modeslist applies.
The following example hides the color mode toggle.
colorMode:
hide: true
Color mode operating system detection is on by default. The following example ignores the user's operating system color mode.
colorMode:
ignoreDetection: true
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.
- Customize color modes - Style light and dark modes with CSS, set a logo for each mode, or add new color modes
- Front matter configuration options - 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