VitePress 自定义 CSS 指南

VitePress 是一款基于 Vite 和 Vue 3 的静态网站生成器，专为文档编写而设计。尽管 VitePress 提供了丰富的默认主题，但在某些情况下，我们可能需要对其进行更深入的定制以满足特定的视觉需求。本文将详细介绍如何通过覆盖根级别的 CSS 变量来自定义 VitePress 的默认主题 CSS。

覆盖根级别的 CSS 变量

VitePress 的默认主题使用 CSS 变量来定义颜色、字体、阴影等样式属性。通过覆盖这些变量，我们可以轻松地调整整个站点的视觉风格。

步骤 1: 创建自定义 CSS 文件

首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在 .vitepress/theme 目录下创建一个名为 custom.css 的文件。

mkdir -p .vitepress/theme
touch .vitepress/theme/custom.css

步骤 2: 覆盖 CSS 变量

在 custom.css 文件中，你可以覆盖任何你希望改变的 CSS 变量。以下是一些示例：

/* .vitepress/theme/custom.css */
:root {
  --vp-c-brand-1: #646cff; /* 更改品牌主色调 */
  --vp-c-brand-2: #747bff; /* 更改品牌次色调 */

  --vp-c-text-1: #333; /* 更改主文字颜色 */
  --vp-c-bg: #f4f4f4; /* 更改背景颜色 */
}

步骤 3: 引入自定义 CSS 文件

接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是 .vitepress/theme/index.js。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css' // 引入自定义 CSS

export default DefaultTheme

步骤 4: 覆盖黑暗模式下的样式

如果你的站点支持黑暗模式，你还需要考虑在 .dark 类下覆盖相应的 CSS 变量。

/* .vitepress/theme/custom.css */
.dark {
  --vp-c-brand-1: #ff646c; /* 黑暗模式下的品牌主色调 */
  --vp-c-brand-2: #ff747b; /* 黑暗模式下的品牌次色调 */

  --vp-c-text-1: #eee; /* 黑暗模式下的主文字颜色 */
  --vp-c-bg: #333; /* 黑暗模式下的背景颜色 */
}

示例：完整 CSS 变量列表

VitePress 的默认主题使用了大量的 CSS 变量，涵盖了颜色、字体、阴影、布局等各个方面。以下是一个简化的 CSS 变量列表示例，展示了你可以覆盖的一些常见变量：

:root {
  --vp-c-brand-1: #646cff; /* 品牌主色调 */
  --vp-c-text-1: #333; /* 主文字颜色 */
  --vp-c-bg: #fff; /* 背景颜色 */
  --vp-font-family-base: 'Inter', sans-serif; /* 基础字体 */
  --vp-code-font-size: 0.875em; /* 代码字体大小 */
  --vp-code-block-bg: #f8f8f8; /* 代码块背景颜色 */
  /* 更多变量... */
}

结论

通过覆盖根级别的 CSS 变量，你可以轻松地自定义 VitePress 站点的视觉风格。这包括颜色、字体、阴影等多个方面，使你的文档网站更具个性和专业感。记得在自定义主题入口文件中引入你的 CSS 文件，并确保在黑暗模式下也进行适当的样式调整。希望这篇文章能帮助你更好地掌握 VitePress 的 CSS 定制技巧！