Element-theme-darkplus
简体中文 | [English](README.en.md)
## 简介
[element-theme-darkplus](https://github.com/dongwei1125/theme-dark) 是一套暗黑风格主题，基于 [Element](https://github.com/ElemeFE/element) 最新版本`v2.15.14`。
- [在线预览](https://dongwei1125.github.io/theme-dark)
- [随便看看](https://juejin.cn/post/7254372820172030011)
## 示例
- [简单切换](https://codepen.io/dongwei1125/pen/VwOoWLy)
- [Progress](https://codepen.io/dongwei1125/pen/vYwoZez)
- [视图过渡/持久化/操作系统响应式](https://codepen.io/dongwei1125/pen/dyExzaP)
## 安装
```bash
npm i element-theme-darkplus -S
```
## 引入
```javascript
// Webpack
import 'element-theme-darkplus/lib/index.css';
// CDN
```
## 部分引入
```javascript
// Webpack
import 'element-theme-darkplus/lib/input.css';
// CDN
```
## 切换式
如果你准备了一套白垩主题，一套暗黑主题，两种主题自由切换，那么以下最适合你。
```javascript
import 'element-ui/lib/theme-chalk/index.css';
import 'element-theme-darkplus/lib/index.color.css';
```
其中官方白垩主题 [theme-chalk](https://github.com/ElementUI/theme-chalk) 包含了组件基础样式和白垩颜色，暗黑主题 [element-theme-darkplus](https://github.com/dongwei1125/theme-dark) 也包括了组件基础样式和暗黑颜色，两者同时引入将造成组件基础样式重复冗余，因此我们额外提供了一套仅包含暗黑颜色的主题包，引入方式非常简单，同名样式文件添加`color`后缀即可。
```javascript
import `element-theme-darkplus/lib/index.color.css`;
import `element-theme-darkplus/lib/input.color.css`;
```
## 高级
评分组件 [Rate](https://github.com/ElemeFE/element/blob/master/packages/rate/src/main.vue) 较为特殊，`Element`内部与颜色相关`props`均定义了默认值，且`template`模板中都采用内联样式，导致外部主题样式无法覆盖。
| `Props` | `默认值` |
| --- | --- |
| `void-color` | `#c6d1de` |
| `disabled-void-color` | `#eff2f7` |
| `text-color` | `#1f2d3d` |
可传空值重置相应`props`值使主题生效。
```html
```
进度条组件 [Progress](https://github.com/ElemeFE/element/blob/master/packages/progress/src/progress.vue) 类似，仅线形进度条支持，环形和仪表盘形不支持。
| `Props` | `默认值` |
| --- | --- |
| `define-back-color` | `#ebeef5` |
| `text-color` | `#606266` |
```html
```
虽然两组件可以传空值重置属性以支持暗黑主题，而对于不关心此功能的同学，却不清楚为什么会传入诸如`text-color=""`这样的属性，这无疑在开发层面徒增了心智负担。
嗯`...`样式么法解决`Rate`和`Progress`根本性问题了。
重新定义`Rate`和`Progress`组件可以吗？还不能破坏原组件的拓展性和唯一性，则采用继承原始组件并在`javascript`里做了一个中间层，帮助用户初始置空相关颜色`props`。
### 全量引入
```javascript
import ElementUI from 'element-ui'
import Darken from 'element-theme-darkplus/utils/darken'
Vue.use(ElementUI)
Vue.use(Darken(ElementUI))
```
### 按需引入
```javascript
import { Progress, Rate } from 'element-ui'
import Darken from 'element-theme-darkplus/utils/darken'
Vue.component(Progress.name, Darken(Progress))// or Vue.use(Darken(Progress))
Vue.component(Rate.name, Darken(Rate))
```
### CDN 引入
```html
```
## 常见问题
### 如何持久化主题、跟随系统响应式更新主题等？
[预览页](https://dongwei1125.github.io/theme-dark) 中主题切换开关`switch`添加了常见的暗黑主题功能，例如浏览器缓存永久保存用户常用主题状态、跟随操作系统预设动态切换主题风格、媒体查询式主题风格过渡等，可参考组件 [ThemeToggle](https://github.com/dongwei1125/theme-dark/tree/master/docs/components/ThemeToggle/dark) 和 [示例](https://codepen.io/dongwei1125/pen/dyExzaP)。
### 持久化首次载入暗黑模式白屏？
原因在于页面已经加载，实例组件在 [Vue](https://v2.cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90) 生命周期内才开始对`DOM`根元素增加`dark`类名，而在载入时间前，还是默认初始样式，此段时间将造成页面白屏。
解决方式非常简单，在`html`内`head`新增脚本，即在载入页面前，读取缓存或者操作系统主题关键字，并考虑是否对`DOM`根元素增加`dark`类名。
```html
```
支持自定义浏览器缓存字的键名。
```html
```