VitePress Theme Element Plus1.1.1

Appearance

配置主题 ​

文档的CSS变量如下，大部分情况下覆盖 --vp-c-brand 、--vp-c-brand-soft 这两个CSS变量即可，可以根据自己的需要使用 :root:root 选择器覆盖相应的CSS变量。

scss
:root {
  --vp-layout-max-width: 1680px;
  --vp-screen-max-width: 1362px;
  --vp-sidebar-width-mobile: 320px;
  --vp-sidebar-width-small: 266px;
  --vp-nav-height: 55px;
  --vp-nav-logo-height: 28px;
  --vp-c-brand: var(--el-color-primary);
  --vp-c-brand-1: var(--vp-c-brand);
  --vp-c-brand-soft: var(--el-color-primary-light-9);
  --vp-c-bg: var(--el-bg-color);
  --text-color: var(--el-text-color-primary);
  --text-color-light: var(--el-text-color-regular);
  --text-color-lighter: var(--el-text-color-secondary);
  --bg-brand-color: var(--vp-c-brand-soft);
  --bg-color: var(--el-bg-color);
  --border-color: var(--el-border-color);
  --font-family: var(--el-font-family);
  --font-family-mono: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
  --code-font-family: var(--font-family-mono);
  --code-font-size: var(--el-font-size-base);
  --code-bg-color: var(--el-fill-color-light);
  --code-text-color: var(--text-color);
  --code-tooltip-bg-color: var(--code-bg-color);
  --code-tooltip-color: #0c61c9;
  --purple-color: #6222c2;
  --purple-color-light: #9065db;
  --block-tip-bg-color: rgba(var(--el-color-primary-rgb), .1);
  --block-warning-bg-color: rgba(var(--el-color-danger-rgb), .1);
  --link-active-bg-color: rgba(var(--el-color-primary-rgb), .1)
}

:root.dark {
  --vp-c-brand: #a8b1ff;
}