Theme Color
Less than 1 minute
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",
},
}),
});