Background
Now that we have a set of dark mode color tokens in Codex, we should update our documentation site to support color scheme switching, so that people can both take advantage of dark mode on the whole site, and see Codex components, design tokens, and icons in both color modes.
Implementation
The following is an MVP version of this. In the future, we could make further improvements, such as a better design for the color tokens page.
Enable color mode switching on the docs site
VitePress supports light and dark color modes out of the box (see VitePress's appearance docs). We need to enable it, and have it default to the user's preference.
We then need to set our dark mode color tokens when VitePress's .dark class is present on the <html> element.
Finally, we need to clean up any colors that don't look right in dark mode.
Show color tokens according to color mode
We need to show the dark mode color tokens on the color tokens demo page. For now, let's just show the correct token depending on the current color mode of the site, along with a message explaining to users what they're seeing, and that they should just use the color tokens rather than raw hex values in order to ensure they have the right value in both color modes.
Acceptance criteria
- Color mode switching is enabled on the docs site, and defaults to your preference
- The site and all its features look correct in dark mode
- The color tokens page shows the correct token depending on the current color mode
Any future work will be documented as separate tasks.
