Style Customization

About 2 min

This article briefly describes how to customize theme styles.

How to Customize Styles

You can create three files under .vuepress/styles folder in your own document for style customization.

  • index.scss: You can place your own styles via CSS or SCSS syntax to modify the appearance of the theme here.

    These styles will be injected after theme and plugin styles.

  • config.scss: You can set some style related variables here, including responsive breakpoints, container class names, code themes, etc.

  • palette.scss: You can set some color and layout related variables here, such as theme color, background color, navbar height, etc.

For the complete config list supported by the above files, see Config → Style.

Common style Customization

Modify Background Color

Please configure the variables starting with $bg-color in config.scss, see [Configuration → Style](../config/ setting)

Modify Theme Font

If you prefer serif[1] to sans-serif[2], you can modify the font yourself. Please set $font-family to value you want in palette.scss.

Best Practice

To let your site display well on different operating systems and devices with different fonts installed, you should set a fallback font [3].

So we recommend using the following font set as your preferred serif style:

$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", sans-serif';

Modify Theme Layout

The theme allows you to freely config navbar, sidebar and footer, and you can also disable them if you don’t like them. Please see Guide → Layout → Navbar, Guide → Layout → Sidebar and Guide → Layout→ Footer for full configuration instructions.

The theme’s content layout also supports customization, if you don’t like some features that are enabled by default, you are free to disable them. For details, please search through the search function of the document.

Modify Animation Speed

If you don’t like the animation speed of the theme and think they are too fast or too slow, you can set $transform-transition in palette.scss to change the animation duration and animation speed curve, the default value is "0.3 ease".

Modify Component Styles

If you are not satisfied with the styling of some components and want to make some tweaks on them, you can override the theme’s default styles by adding CSS with !important in index.scss.

If your changes involve modifying the component DOM (document structure), you may need to refer to the Replace Theme Components section to customize the override of the component.

Add New Layout or Edit theme

To do some revamping of the whole theme, or want to add a new layout, you can extend the theme. The new theme can be stored locally in the project, or it can be republished as a new theme on npm.

For related content, see Extending Theme.

  1. in new window ↩︎

  2. in new window ↩︎

  3. in new window ↩︎