Vitepress Theme

Posted on  by admin

Other Differences #

You can enable a custom theme by adding the .vitepress/theme/index.js file (the "theme entry file").

A VitePress custom theme is simply an object containing three properties and is defined as follows:.

  • The theme entry file should export the theme as its default export:.
  • ..where the Layout component could look like this:.

The default export is the only contract for a custom theme. Inside your custom theme, it works just like a normal Vite + Vue 3 application.

Using a Custom Theme #

Motivation #

Do note the theme also needs to be SSR-compatible.

To distribute a theme, simply export the object in your package entry.

To consume an external theme, import and re-export it from the custom theme entry:.

If you want to extend and customize the default theme, you can import it from vitepress/theme and augment it in a custom theme entry.

Here are some examples of common customizations:. Since we are using Vite, you can also leverage Vite's glob import feature to auto register a directory of components.

Improvements Over VuePress v1 #

The default theme CSS is customizable by overriding root level CSS variables:.

Extending the Default Theme #

See default theme CSS variables that can be overridden.

The default theme's component has a few slots that can be used to inject content at certain locations of the page.

Here's an example of injecting a component into the top of the sidebar:.