vuepress-theme-quicksand

1.0.4 • Public • Published

vuepress-theme-quicksand

vuepress-theme-quicksand

A niubility style theme for VuePress v2.0

Install

npm i vuepress-theme-quicksand
#or
yarn add vuepress-theme-quicksand

Usage

.vuepress/config.js

module.exports = {
  theme: 'vuepress-theme-quicksand',
  // or
  theme: 'quicksand',
}

Inherit

.vuepress/theme/index.js

module.exports = {
  name: 'vuepress-theme-local',
  extends: 'vuepress-theme-quicksand',
  layouts: {
    Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
  },
}

Extension

Code theme

Code block settings
  • dark (default)
```javascript#dark
console.log('dark theme')
```
  • light
```javascript#light
console.log('light theme')
```
Global settings
module.exports = {
  themeConfig: {
    codeTheme: 'light',
  }
}

Style variables

:root, html.dark {
  --container-width: 1280px;

  --font-family-quicksand: Quicksand, var(--font-family);
  --font-family-code: Source Code Pro, var(--font-family);
  
  .theme-code-dark {
    --code-text-color: #f0f0f0;
    --code-brand-color: #00CCFF;
  }

  .theme-code-light {
    --code-text-color: #3a385d;
    --code-brand-color: var(--c-brand);
  }
}

Readme

Keywords

Package Sidebar

Install

npm i vuepress-theme-quicksand

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

20.9 kB

Total Files

15

Last publish

Collaborators

  • xxyan0205