插件名称 | vue-dark-mode |
---|---|
发布时间 | 2020年5月29日 |
插件作者 | vue-a11y |
Vue.js应用程序的自定义,可访问暗模式的简单实现。
该库使用localStorage或sessionStorage来存储用户对颜色模式的选择。
还支持主题颜色元,可让您在Android版Chrome浏览器中设置工具栏颜色。
v1.0.1(07/24/2020)
v1.0.0(06/23/2020)
# 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'
}