主题颜色工具
2024-07-29
提示
这个工具可以帮助您快速创建自定义主题颜色。点击下方的按钮，选择您想要的主题颜色进行配置。
工具会自动应用您的修改到当前站点，您可以随意切换到任意页面查看效果。
本工具只能帮助您简单的创建主题颜色。如果您期望更加复杂的主题颜色配置，请查看 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; /* 代码块背景 */
}