# Introduction

vuepress-theme-default-prefers-color-scheme is a theme that adds light and dark themes to the default theme of vuepress

# How It Works

base on prefers-color-scheme and CSS Variables

# View Support Browsers

prefers-color-scheme also needs your system support

  • mac Mojave ^10.14
  • windows 10 ^1809

For unsupported browsers, the same style as the default theme will be displayed

# Installation

yarn add vuepress-theme-default-prefers-color-scheme
# or
npm i vuepress-theme-default-prefers-color-scheme
1
2
3

# Usage



 





// .vuepress -> config.js
module.exports = {
  theme: 'default-prefers-color-scheme',
  themeConfig: {
    // ...
  }
}
1
2
3
4
5
6
7

# Options

# defaultTheme

  • Type: string, object
  • Required: false

TIP

By default, light or dark themes are displayed by prefers-color-scheme, You can change it by defaultTheme. base on css-prefers-color-scheme

support light, dark or { theme: [begin hours, end hours] }




 

 

 










module.exports = {
  theme: 'default-prefers-color-scheme',
  themeConfig: {
    defaultTheme: 'dark',
    // or
    defaultTheme: { dark: [18, 6] },
    // or
    defaultTheme: { light: [6, 18], dark: [18, 6] },
  },
  // When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
  postcss: {
    plugins: [
      require('css-prefers-color-scheme/postcss'),
      require('autoprefixer')
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Theme Config

# Styling

To apply simple color overrides to the styling of the default preset, In your .vuepress/styles/palette.styl file.

$accentColor and $accentDarkColor are best changed together