# 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

WARNING

By default, light or dark themes are displayed by prefers-color-scheme. You can break it by set defaultTheme.

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] },
  }
}
1
2
3
4
5
6
7
8
9
10

WARNING

After v1.1.0, it is no longer necessary to add a postcss plugIn to set defaulttheme. It is recommended to remove the relevant content. In the near future, css-prefers-color-scheme will be remove from package.json

postcss: {

plugins: [

require('css-prefers-color-scheme/postcss'),

require('autoprefixer')

]

}

Theme Config

# Styling

To apply simple color overrides to the styling of the default preset, In your .vuepress/styles/palette.styl file. or set CSS Variables in your .vuepress/styles/index.styl file.

$accentColor and $accentDarkColor are best changed together