CSS Customization

Built-in extension points: the default theme exposes CSS custom properties, and VitePress lets a custom theme extend it. This site imports .vitepress/theme/custom.css from its theme entry instead of replacing the default theme.

Live custom class

Custom CSS extension

This responsive card uses the project’s .feature-demo__item class.

Its colors follow VitePress --vp-* variables in light and dark mode.

Brand variables can be retuned in a custom stylesheet, for example:

:root {
  --vp-c-brand-1: #2563eb;
  --vp-c-brand-2: #3b82f6;
}

.dark {
  --vp-c-brand-1: #60a5fa;
}

Custom classes can style page-specific HTML or Vue components, while variables retune the default theme consistently. See the official theming guide and dark-mode demonstration.