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# ornpm i vuepress-theme-default-prefers-color-scheme
Usage
// .vuepress -> config.jsmoduleexports =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:
moduleexports =theme: 'default-prefers-color-scheme'themeConfig:overrideTheme: 'dark'// oroverrideTheme: 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:
moduleexports =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