Skip to main content


Less than 1 minuteInterfaceDarkmodeInterface

In dark mode, the page uses a dark background to make you comfortable.

Try it

Toggle the button below to see effects.


You can config darkmode through darkmode in theme options.

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

export default defineUserConfig({
  theme: hopeTheme({
    darkmode: "your option",


Available options:

  • "switch": switch between dark, light and auto (default)
  • "toggle": toggle between lightmode and darkmode
  • "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

Global Variables

You can use $isDarkmode in any Markdown file to get darkmode status.