Element-theme-darkplus

简体中文 | English

简介

element-theme-darkplus 是一套暗黑风格主题，基于 Element 最新版本v2.15.14。

• 在线预览
• 随便看看

示例

• 简单切换
• Progress
• 视图过渡/持久化/操作系统响应式

安装

npm i element-theme-darkplus -S

引入

// Webpack
import 'element-theme-darkplus/lib/index.css';

// CDN
<link rel="stylesheet" href="https://unpkg.com/element-theme-darkplus/lib/index.css">

部分引入

// Webpack
import 'element-theme-darkplus/lib/input.css';

// CDN
<link rel="stylesheet" href="https://unpkg.com/element-theme-darkplus/lib/input.css">

切换式

如果你准备了一套白垩主题，一套暗黑主题，两种主题自由切换，那么以下最适合你。

import 'element-ui/lib/theme-chalk/index.css';
import 'element-theme-darkplus/lib/index.color.css';

其中官方白垩主题 theme-chalk 包含了组件基础样式和白垩颜色，暗黑主题 element-theme-darkplus 也包括了组件基础样式和暗黑颜色，两者同时引入将造成组件基础样式重复冗余，因此我们额外提供了一套仅包含暗黑颜色的主题包，引入方式非常简单，同名样式文件添加color后缀即可。

import `element-theme-darkplus/lib/index.color.css`;
import `element-theme-darkplus/lib/input.color.css`;

高级

评分组件 Rate 较为特殊，Element内部与颜色相关props均定义了默认值，且template模板中都采用内联样式，导致外部主题样式无法覆盖。

Props	默认值
void-color	#c6d1de
disabled-void-color	#eff2f7
text-color	#1f2d3d

可传空值重置相应props值使主题生效。

<el-rate :value="3" show-text void-color="" text-color="" />

进度条组件 Progress 类似，仅线形进度条支持，环形和仪表盘形不支持。

Props	默认值
define-back-color	#ebeef5
text-color	#606266

<el-progress :percentage="20" define-back-color="" text-color="" />

虽然两组件可以传空值重置属性以支持暗黑主题，而对于不关心此功能的同学，却不清楚为什么会传入诸如text-color=""这样的属性，这无疑在开发层面徒增了心智负担。

嗯...样式么法解决Rate和Progress根本性问题了。

重新定义Rate和Progress组件可以吗？还不能破坏原组件的拓展性和唯一性，则采用继承原始组件并在javascript里做了一个中间层，帮助用户初始置空相关颜色props。

全量引入

import ElementUI from 'element-ui'
import Darken from 'element-theme-darkplus/utils/darken'

Vue.use(ElementUI)
Vue.use(Darken(ElementUI))

按需引入

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 引入

<script src="https://unpkg.com/element-theme-darkplus/utils/darken.js"></script>

常见问题

如何持久化主题、跟随系统响应式更新主题等？

预览页 中主题切换开关switch添加了常见的暗黑主题功能，例如浏览器缓存永久保存用户常用主题状态、跟随操作系统预设动态切换主题风格、媒体查询式主题风格过渡等，可参考组件 ThemeToggle 和 示例。

持久化首次载入暗黑模式白屏？

原因在于页面已经加载，实例组件在 Vue 生命周期内才开始对DOM根元素增加dark类名，而在载入时间前，还是默认初始样式，此段时间将造成页面白屏。

解决方式非常简单，在html内head新增脚本，即在载入页面前，读取缓存或者操作系统主题关键字，并考虑是否对DOM根元素增加dark类名。

<script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js"></script>

支持自定义浏览器缓存字的键名。

<script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js" storage-key="custom-theme-appearance"></script>