1. vuepress-theme-default-prefers-color-scheme
add prefers-color-scheme for vuepress default theme
vuepress-theme-default-prefers-color-scheme
Package: vuepress-theme-default-prefers-color-scheme
Created by: tolking
Last modified: Mon, 23 May 2022 22:20:43 GMT
Version: 2.0.0
License: MIT
Downloads: 1,486
Repository: https://github.com/tolking/vuepress-theme-default-prefers-color-scheme

Install

npm install vuepress-theme-default-prefers-color-scheme
yarn add vuepress-theme-default-prefers-color-scheme

vuepress-theme-default-prefers-color-scheme

This plugin adds support for prefers-color-scheme to the Vuepress 1.x default theme.

Live Demo and Documentation

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'
}

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

Theme Config

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

License

MIT

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code