Darkmode

The theme supports darkmode and allows you to customize it.

Options

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

Try it

Toggle the button to see effects:

Getting Status

• In Markdown files or Vue Template, you can access $isDarkmode to get darkmode status directly.

• In scripts, you can import useDarkmode from vuepress-theme-hope/darkmode to get darkmode status:

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

  If you enable theme alias by setting { custom: true}, you should use @theme-hope/modules/outlook/composables/index instead:

  import { useDarkmode } from "@theme-hope/modules/outlook/composables";
  
  const { isDarkmode } = useDarkmode();
  
  console.log(isDarkmode.value); // get darkmode status