add prefers-color-scheme for vuepress default theme
This theme for Vuepress 1.x
yarn add vuepress-theme-default-prefers-color-scheme
# or
npm i vuepress-theme-default-prefers-color-scheme// .vuepress -> config.js
module.exports = {
theme: 'default-prefers-color-scheme',
themeConfig: {
// ...
}
}- Type:
string,object - Default:
undefined - Required:
false
By default, light or dark themes are displayed by prefers-color-scheme, You can change it by 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] },
},
// 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')
]
}
}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
vue vuepress documentation prefers-color-scheme default-theme light-theme dark-theme