Star on GitHub Create Issues Buy me a Bubble Tea

Custom Styles

About 407 wordsAbout 1 min

2025-10-08

Theme Customization

Custom styles are supported.

Although the theme uses SASS as the CSS preprocessor, all colors are defined using CSS Variables. Therefore, you can create a CSS file or SCSS file to override them.

First, create a styles/index.css file in the .vuepress directory. Then, import this file in the client configuration file.

.vuepress/client.ts

import { defineClientConfig } from 'vuepress/client'

import './styles/index.css'

export default defineClientConfig({
  // ...
})

.vuepress/styles/index.css

:root {
  --vp-c-brand-1: #5086a1;
}

Style File

Create a file such as custom.css in the .vuepress directory.

Add additional styles or override default styles here:

:root {
  scroll-behavior: smooth;
}

You can also use it to override the predefined CSS variables of the default theme.

The following are only examples of variable names and formatting styles

These values may change with each theme version. For the actual values, please refer to vars.css. The brand colors are derived from the --vp-c-turquoise-* variables, and their values differ between light and dark modes.

:root {
  /** Theme Colors (derived from --vp-c-turquoise-*) */
  --vp-c-brand-1: var(--vp-c-turquoise-1);
  --vp-c-brand-2: var(--vp-c-turquoise-2);
  --vp-c-brand-3: var(--vp-c-turquoise-3);
  --vp-c-brand-soft: var(--vp-c-turquoise-soft);

  /** Background Colors */
  --vp-c-bg: #ffffff;
  --vp-c-bg-alt: #f6f6f7;
  --vp-c-bg-elv: #ffffff;
  --vp-c-bg-soft: #f6f6f7;

  /** Text Colors */
  --vp-c-text-1: rgb(60 60 67);
  --vp-c-text-2: rgb(60 60 67 / 0.78);
  --vp-c-text-3: rgb(60 60 67 / 0.72);
}

[data-theme="dark"] {
  --vp-c-brand-1: var(--vp-c-turquoise-1);
  --vp-c-brand-2: var(--vp-c-turquoise-2);
  --vp-c-brand-3: var(--vp-c-turquoise-3);
  --vp-c-brand-soft: var(--vp-c-turquoise-soft);

  --vp-c-bg: #1b1b1f;
  --vp-c-bg-alt: #161618;
  --vp-c-bg-elv: #202127;
  --vp-c-bg-soft: #202127;

  --vp-c-text-1: rgb(255 255 245 / 0.86);
  --vp-c-text-2: rgb(235 235 245 / 0.6);
  --vp-c-text-3: rgb(235 235 245 / 0.55);
}