Sperate darkmode into a plugin

[Mister-Hope]

Many plugins are providing UIs, and it's good to have the darkmode feature sperated. This can allow plugins to support darkmode in all themes.

Options

The darkmode plugin should have these options:

status

• 'switch': "off | auto | on" switch (default)
• 'toggle': "Close | Open" toggle switch
• 'auto': Automatically decide whether to apply dark mode based on user device’s color-scheme or current time
• 'light': forced in lightmode (the switch won't disappear, and UI stays in lightmode)
• 'dark': forced in darkmode (the switch won't disappear, and UI stays in darkmode)

The name can be dicussed if there are better words

selector

{
  // tag selector
  tag: string;
 // class or attribute
  type: 'class' | 'attribute';
  // required and only available when type is 'attribute'
  name?: string;
  // string means the content in darkmode
 // [string, string] means [content in lightmode, content in darkmode]
  content: [string, string] | string;
}

Examples

For theme default:

{ tag: 'html', type: 'class', content: 'dark' }

For a theme use data-theme="dark" data-theme="light" on html :

{ tag: 'html', type: 'attribute', name: 'data-theme', content: ['light', 'dark'] }

Exporting

• A global component called <DarkmodeButton /> which could be use in themes

• A composition api called useDarkmode in @vuepress/plugin-darkmode/client

  // darkmode is a global boolean ref, so users can use this ref in scripts and watch this ref to listen darkmode changes.
  const darkmode = useDarkmode();

• temp files including $lightSelector $darkSelector variables:

  • @vuepress/darkmode/sass: sass file
  • @vuepress/darkmode/less: less file
  • @vuepress/darkmode/stylus: stylus file

  This allow plugin authos writing styles like:

  @use '@vuepress/darkmode/sass' as *;
  
  .someclass {
    // common properties
  
    #{$lightSelector} & {
      // styles in lightmode
    }
  
    #{$darkSelector} & {
      // styles in darkmode
    }
  }

Addtional

All plugins should have a option (e.g.: darkmode), configed by theme or users whether @vuepress/plugin-darkmode is actually used.

---

Why do we need this feature outside of theme default?

Extracting this into a plugin can make this feature commonly use in all themes which want to support darkmode, and make plugins be able to support them in plugin side, instead of letting the theme author to overide styles to support darkmode.

Not all the UI changes under darkmode could be done with css variables, and some tools like presentation, chart, will need to redraw themseleves in js apis.

The plugins should be able to make themselves support darkmode (if they need extra things besides css variable) by accessing a reactive darkmode varible and selector variables in styles.

---

@meteorlxy If you agree, I can build a plugin and make a PR.