VuePress theme - Gitbook inspired

A VuePress theme inspired by Gitbook.

Live demo

I really love their clean and minimalist style, so I decided to do a theme for VuePress.

It is not 100% identical to a Gitbook page, some choices are made to respect VuePress limitations. It is based on @vuepress/theme-default and only extend it.

Installation

npm install --save-dev vuepress-theme-book

Usage

In your .vuepress/config.js file simply add:

module.exports = {
  theme: "book",
  ...
}

Configuration

There is no specific configuration for this theme. However, as we're extending the default theme you can configure all of their options.

Find out more on the default theme config page All these config can be added to your .vuepress/config.js file under the key themeConfig.

Also, if you want to change the color palette, you can modify your .vuepress/styles/palette.styl. The available variables are (including the default theme ones):

// colors
$accentColor = #3eaf7c
$textColor = #3b454e
$titleColor = #242a31
$borderColor = #eaecef
$sidebarHeaderColor = #697179
$sidebarBgColor = #f5f7f9
$lightDelimiterColor = #e6ecf1
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// layout
$navbarHeight = 4rem
$sidebarWidth = 18.625rem
$contentWidth = 740px
$homePageWidth = 960px

// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

License

MIT

Contributing

I would be more than happy to receive feedback/issues/pull request, so don't hesitate.

• Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
• Fork repository, make changes and send a pull request

Thank you!