Vue.js应用程序的自定义，可访问暗模式的简单实现。

该库使用localStorage或sessionStorage来存储用户对颜色模式的选择。

还支持主题颜色元，可让您在Android版Chrome浏览器中设置工具栏颜色。

变更日志：

v1.0.1（07/24/2020）

• 修复：删除标题以避免在屏幕阅读器上出现冗余

v1.0.0（06/23/2020）

• 选择新的颜色模式时发生的更改模式事件
• 增加了SSR支持
• 允许单独导入组件
• 支持自定义存储
• 通过prefer-color-scheme切换收藏夹图标
• Bug修复

安装和下载：

# Yarn
$ yarn add @vue-a11y/dark-mode

# NPM
$ npm install @vue-a11y/dark-mode --save

如何使用它：

1.如下导入深色模式组件：

import Vue from 'vue'
import VueDarkMode from '@vue-a11y/dark-mode'
Vue.use(VueDarkMode)

2.将深色模式切换器添加到模板。

<VueDarkMode>
  <template v-slot="{ mode }">
    Color mode: {{ mode }}
  </template>
</VueDarkMode>

3.确定深色模式的颜色。

:root {
  --bg: #fff;
  --color: #222;
}
html.dark-mode {
  --bg: #222;
  --color: #fff;
}
body {
  background-color: var(--bg);
  color: var(--color);
}

4.默认props。

defaultMode: {
  type: String,
  default: 'light'
},
modes: {
  type: Array,
  default () {
    return ['light', 'dark', 'system']
  }
},
className: {
  type: String,
  default: '%cm-mode'
},
storage: {
  type: String,
  default: 'localStorage'
},
metaThemeColor: {
  type: Object,
  default: () => ({})
},
ariaLabel: {
  type: String,
  default: 'toggle to %cm mode color'
},
ariaLive: {
  type: String,
  default: '%cm color mode is enabled'
}

---

官网：https://github.com/vue-a11y/vue-dark-mode

演示：https://www.vue365.cn/code_demo.php?id=745

GitHub下载：https://github.com/vue-a11y/vue-dark-mode/archive/master.zip