Theme Color

The theme allows you to customize theme color and even provide a picker.

Setting Default Theme Color

You should set the default theme color of your site in .vuepress/styles/palette.scss:

$theme-color: #f00;

Theme Color Picker

You need to set themeColor with { colorName1: colorValue1, colorName2: colorValue2, ... } format:

The first color should be the default theme color above.

Example

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    themeColor: {
      blue: "#2196f3",
      red: "#f26d6d",
      green: "#3eaf7c",
      orange: "#fb9b5f",
    },
  }),
});

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    themeColor: {
      blue: "#2196f3",
      red: "#f26d6d",
      green: "#3eaf7c",
      orange: "#fb9b5f",
    },
  }),
});

Try it