Dark mode

Less than 1 minute

The theme supports dark mode and allows you to customize it.

Options

You can config dark mode through darkmode in theme options.

import { hopeTheme
 } from "vuepress-theme-hope";

export default {
  theme
: hopeTheme
({
    darkmode
: "switch", // or "toggle", "auto", "enable", "disable"
  }),
};

Available options:

"switch": switch between dark, light and auto (default)
"toggle": toggle between light mode and dark mode
"auto": Automatically decide whether to apply dark mode based on user device's color-scheme or current time
"enable": only dark mode
"disable": disable dark mode

Try it

Toggle the button to see effects:

Getting Status

In Markdown files or Vue Template, you can access $isDarkMode to get dark mode status directly.

In scripts, you can import useDarkMode from @vuepress/helper/client to get dark mode status:

import { useDarkMode
 } from "@vuepress/helper/client";

const isDarkMode
 = useDarkMode
();

console
.log
(isDarkMode
.value
); // get dark mode status

If @vuepress/helper is not installed, you should install it first:

pnpm

pnpm add -D @vuepress/helper@next

yarn

yarn add -D @vuepress/helper@next

npm

npm i -D @vuepress/helper@next