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 { hopeTheme } from "vuepress-theme-hope";

export default {
  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

Getting Status

  • You can use $isDarkmode in Markdown files or Vue Template to get darkmode status.

  • You can import useDarkmode from vuepress-theme-hope/client to get darkmode status:

    import { useDarkmode } from "vuepress-theme-hope/client";
    const { isDarkmode } = useDarkmode();
    console.log(isDarkmode.value); // get darkmode status