# vuepress-theme-default-prefers-color-scheme

add prefers-color-scheme for vuepress default theme

README | CHANGELOG

This theme for Vuepress 1.x

Live Demo and Documentation


light.jpg

dark.jpg


# Installation

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

# Usage

// .vuepress -> config.js
module.exports = {
  theme: 'default-prefers-color-scheme',
  themeConfig: {
    // ...
  }
}

# Options

# defaultTheme

  • Type: string, object
  • 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')
    ]
  }
}

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

# License

MIT

# Keywords

vue vuepress documentation prefers-color-scheme default-theme light-theme dark-theme

Made with ❤️ by Ahmad Mostafa - @z3by