Installation

Succinct (opens new window) uses prefers-color-scheme (opens new window) media query and CSS variables (opens new window) to generate dark and light themes.

Get Started

Add the dependency to your existing Vuepress project via Yarn or NPM.

yarn add -D vuepress-theme-succinct

npm install -D vuepress-theme-succinct

// Make sure to add code blocks to your code group

TIP

Refer to Getting Started Guide (opens new window) to create a Vuepress project.

Update .vuepress/config.js as follows.

// .vuepress > config.js
module.exports = {
  theme: 'vuepress-theme-succinct',
  globalUIComponents: [
    'ThemeManager'
  ],
}

ThemeManager provides theme-switching functionality across the app.

Note that you can also use the shorthand name for the theme.

// .vuepress > config.js
module.exports = {
  theme: 'succinct',
  globalUIComponents: [
    'ThemeManager'
  ],
}