Dark Mode

Built-in: this site's appearance: true setting enables the default theme's appearance control. Use the sun/moon control in the navigation to switch the live page between light and dark appearance; the theme also honors the system preference and remembers a visitor's choice.

Theme-aware demonstration

Inspect the color change

The card, code blocks, alerts, and Mermaid container on this page use VitePress theme variables, so their foregrounds and backgrounds adapt when the appearance changes.

The project's .vitepress/theme/custom.css styles its demonstration classes with theme variables such as --vp-c-brand-1, while the default theme supplies the mode switching and both palettes. See the official site configuration reference and the customization page.