提示

这个工具可以帮助您快速创建自定义主题颜色。点击下方的按钮，选择您想要的主题颜色进行配置。

工具会自动应用您的修改到当前站点，您可以随意切换到任意页面查看效果。

本工具只能帮助您简单的创建主题颜色。如果您期望更加复杂的主题颜色配置，请查看 styles/vars.css

浅色主题

主题色

brand-1

链接颜色、强调色

brand-2

链接、按钮 hover 颜色

brand-3

背景色、边框色

brand-soft

辅助色

文本颜色

text-1

主要文本

text-2

次要文本

text-3

辅助文本

背景色

bg

主体背景

nav-bg

导航栏背景

nav-screen-bg

移动端导航栏

local-nav-bg

页面内导航栏

sidebar-bg

侧边栏背景

code-block-bg

代码块背景

深色主题

主题色

brand-1

链接颜色、强调色

brand-2

链接、按钮 hover 颜色

brand-3

背景色、边框色

brand-soft

辅助色

文本颜色

text-1

主要文本

text-2

次要文本

text-3

辅助文本

背景色

bg

主体背景

nav-bg

导航栏背景

nav-screen-bg

移动端导航栏

local-nav-bg

页面内导航栏

sidebar-bg

侧边栏背景

code-block-bg

代码块背景

复制下方的代码到您的项目中，请参考 主题定制

:root {

  /**
   * 主题色
   * -------------------------------------------------------------------------- */

  --vp-c-brand-1: #5086a1;                            /* 链接颜色、强调色 */
  --vp-c-brand-2: #6aa1b7;                            /* 链接、按钮 hover 颜色 */
  --vp-c-brand-3: #8cccd5;                            /* 背景色、边框色 */
  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);      /* 辅助色 */

  /**
   * 文本颜色
   * -------------------------------------------------------------------------- */

  --vp-c-text-1: rgba(60, 60, 67);                    /* 主要文本 */
  --vp-c-text-2: rgba(60, 60, 67, 0.78);              /* 次要文本 */
  --vp-c-text-3: rgba(60, 60, 67, 0.56);              /* 辅助文本 */

  /**
   * 背景色
   * -------------------------------------------------------------------------- */

  --vp-c-bg: #fff;                                    /* 主体背景 */
  --vp-nav-bg-color: #fff;                            /* 导航栏背景 */
  --vp-nav-screen-bg-color: #fff;                     /* 移动端导航栏 */
  --vp-local-nav-bg-color: #fff;                      /* 页面内导航栏 */
  --vp-sidebar-bg-color: #f6f6f7;                     /* 侧边栏背景 */
  --vp-code-block-bg: #f6f8fa;                        /* 代码块背景 */
}

[data-theme="dark"] {

  /**
   * 主题色
   * -------------------------------------------------------------------------- */

  --vp-c-brand-1: #8cccd5;                            /* 链接颜色、强调色 */
  --vp-c-brand-2: #6aa1b7;                            /* 链接、按钮 hover 颜色 */
  --vp-c-brand-3: #5086a1;                            /* 背景色、边框色 */
  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);      /* 辅助色 */

  /**
   * 文本颜色
   * -------------------------------------------------------------------------- */

  --vp-c-text-1: rgba(255, 255, 245, 0.86);           /* 主要文本 */
  --vp-c-text-2: rgba(235, 235, 245, 0.6);            /* 次要文本 */
  --vp-c-text-3: rgba(235, 235, 245, 0.38);           /* 辅助文本 */

  /**
   * 背景色
   * -------------------------------------------------------------------------- */

  --vp-c-bg: #1b1b1f;                                 /* 主体背景 */
  --vp-nav-bg-color: #1b1b1f;                         /* 导航栏背景 */
  --vp-nav-screen-bg-color: #1b1b1f;                  /* 移动端导航栏 */
  --vp-local-nav-bg-color: #1b1b1f;                   /* 页面内导航栏 */
  --vp-sidebar-bg-color: #161618;                     /* 侧边栏背景 */
  --vp-code-block-bg: #202127;                        /* 代码块背景 */
}