Introduction | vuepress-theme-default-prefers-color-scheme

# Introduction

vuepress-theme-default-prefers-color-scheme (opens new window) is a theme that adds light and dark themes to the default theme (opens new window) of vuepress.

# Requirements

# How it works

Based on prefers-color-scheme and CSS Variables.

# Supported browsers

prefers-color-scheme also needs your system support.

macOS 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

# `overrideTheme` (optional)

Force users into a specific theme, ignoring prefers-color-scheme (opens new window).

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] },
  }
}

1
2
3
4
5
6
7
8

# `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',
  }
}

1
2
3
4
5
6

Theme Config (opens new window)

# Styling

To apply simple color overrides to the styling of the default preset (opens new window) 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.

Migration →