Dark mode

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

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:

  pnpmyarnnpm

  pnpm

  pnpm add -D @vuepress/helper@next

  yarn

  yarn add -D @vuepress/helper@next

  npm

  npm i -D @vuepress/helper@next