Overriding VuePress CSS Styles

Every post I found about updating the default VuePress theme was outdated. Here's a quick post on how to do it.

Reoccurring Styles with Variables #

1. Create a .vuepress/styles/palette.styl file.
2. Change a variable such as $accentColor = #3eaf7c to a color you prefer.

Here is a link to the latest VuePress documentation discussing this.

Example #

I decided the default Vue green #3eaf7c is a bit too Vuey.

/* default $accentColor */
$accentColor = #3eaf7c

So I swapped it with a nice purple/blue color to personalize the site a bit.

/* .vuepress/styles/palette.styl */
$accentColor = #4979ff

Individual CSS Elements #

1. Create a .vuepress/styles/index.styl file.
2. Write CSS or Stylus to enhance your VuePress styles.

Here is a link to the latest VuePress documentation discussing this.

Example #

I find the default spacing that VuePress provides to be too close together.

/* default css */
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

So I took some inspiration from the default VitePress theme and edited my .vuepress.styles.index.styl file with

/* .vuepress.styles.index.styl */
blockquote,
ol,
p,
ul {
  margin: 1rem 0;
  line-height: 1.7;
}