Theme Colors Tool
2025-10-09
Tips
This tool helps you quickly create custom theme colors. Click the buttons below to select and configure your desired theme colors.
Modifications are automatically applied to the current site, allowing you to navigate to any page and preview the changes.
This tool provides basic theme color creation. For more advanced theme color configuration, please refer to styles/vars.css
Light theme
主题色
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
代码块背景Dark theme
主题色
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
代码块背景Copy the code below and paste it into your project, please refer to Theme customization
: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; /* 代码块背景 */
}