Dark mode

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

Options

You can config dark mode through darkmode in theme options.

.vuepress/theme.ts

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

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

  // other options...
});

darkmode'switch' | 'toggle' | 'auto' | 'enable' | 'disable'

Default'switch'

Whether to enable dark mode support:

• 'switch': switch between dark, light and auto
• 'toggle': toggle between light mode and dark mode
• 'auto': automatically decide whether to apply dark mode based on the user device 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:

  Darkmode enabled: {{ $isDarkMode }}
  
  <img v-if="$isDarkMode" src="/dark.png" alt="dark" />
  <img v-else src="/light.png" alt="light" />

• In scripts, you can import useDarkMode from vuepress-theme-hope/client to get dark mode status:

  import { 
  useDarkMode
   } from "vuepress-theme-hope/client";
  
  export default {
    
  setup
  () {
      const { 
  isDarkMode
   } = 
  useDarkMode
  ();
  
      
  console
  .
  log
  (
  isDarkMode
  .
  value
  ); // get dark mode status
    },
  };