Vue.js的可自定义暗模式组件

Vue.js的可自定义暗模式组件
插件名称 vue-dark-mode
发布时间 2020年5月29日
插件作者 vue-a11y

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

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

还支持主题颜色元,可让您在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'
}