Package Exports
- vuepress-theme-default-prefers-color-scheme
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-theme-default-prefers-color-scheme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vuepress-theme-default-prefers-color-scheme
This plugin adds support for prefers-color-scheme to the Vuepress 1.x default theme.
Installation
yarn add vuepress-theme-default-prefers-color-scheme
# or
npm i vuepress-theme-default-prefers-color-schemeUsage
// .vuepress -> config.js
module.exports = {
theme: 'default-prefers-color-scheme'
}Options
overrideTheme (optional)
Force users into a specific theme, ignoring prefers-color-scheme.
Allowed values:
'light' | 'dark': Always use the given theme{ light: [beginHours: number, endHours: number], dark: [beginHours: number, endHours: number] }: Control the time of the day when each theme is used
For example:
module.exports = {
theme: 'default-prefers-color-scheme',
themeConfig: {
overrideTheme: 'dark',
// or
overrideTheme: { light: [6, 18], dark: [18, 6] },
}
}prefersTheme (optional)
Use the given theme when the browser does not support prefers-color-scheme but supports CSS Variables
Allowed values:
'light' | 'dark'
For example:
module.exports = {
theme: 'default-prefers-color-scheme',
themeConfig: {
prefersTheme: 'dark',
}
}Styling
Apply simple color overrides to the styling of the default preset
in your .vuepress/styles/palette.styl file.
Alternatively, set CSS Variables in your .vuepress/styles/index.styl file.
$accentColor and $accentDarkColor are best changed together
Changelog
This project uses semantic versioning and tracks changes in CHANGELOG