Theme Customization

The theme exposes the following CSS variables. In most cases, overriding --vp-c-brand and --vp-c-brand-soft is enough. Use the :root:root selector to override variables as needed.

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-3: var(--el-color-primary-light-3);
  --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), 0.1);
  --block-warning-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
  --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
}

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

Theme Customization ​

Theme Customization