前言

element-plus@2.2.0 已经开始支持暗黑模式了

通过在html标签上添加一个名为 dark 的类来启用

基于 vue3 & element-plus 的项目现在可以方便的添加暗黑模式

一、基本使用

因为是通过在html标签上添加 dark 类，可以自行实现切换

但为了方便切换以及进一步的定制化，官方推荐使用 useDark | VueUse

示例：以下，基于 element-plus switch组件创建了一个暗黑模式开关组件，将它放入菜单栏，就可以方便地切换模式了

<script setup>
import { useDark, useToggle } from '@vueuse/core'const isDark = useDark()
const toggleDark = useToggle(isDark)</script><template><span @click.stop="toggleDark()">暗黑模式</span><el-switch size="small" v-model="isDark"/>
</template>

进一步定制化可查阅官方文档

二、自定义深色样式

暗黑模式中，一旦混入非深色样式，就会非常难看刺眼，一些自定义样式的暗黑模式适配是少不了的

1、深色样式

element-plus定义了一些暗黑模式下的变量，满足其自身样式的暗黑模式适配

项目中设定了颜色的样式是无法自动适配的，需要我们手动写一套深色样式来覆盖

html.dark {.my-dialog {background-color: #304156;color: #bfcbd9;}
}

2、变量覆盖

一些反复使用的样式可以定义成变量重用，这样，就可以通过简单的变量覆盖来适配暗黑模式

:root {--theme-color: #409EFF;
}
html.dark {--theme-color: #135fad;
}
.demo-class {background-color:var(--theme-color)}
.demo-class-one button {color:var(--theme-color)}

3、element-plus变量覆盖

如果想更改element-plus默认的深色样式，可再次定义并覆盖之。为了正确覆盖，下述样式需在引入element-plus样式后引入

src/styles/demo.scss：

html.dark {/* 覆盖element-plus默认深色背景色 */--el-bg-color: #626aef;.el-button--primary {--el-button-text-color: #ededed;}
}

main.js：

import 'element-plus/dist/index.css'
import './styles/demo.scss'

4、scss变量

scss定义变量，并在其它样式中引入使用。结合css变量，也可以轻松实现暗黑模式的适配

src/styles/variables.scss：

$menuBg:var(--menuBg);
$menuActiveText:var(--themeColor);
$btnColor: var(--themeColor);

src/styles/index.scss：

@import './variables.scss';:root {--themeColor: #409EFF;--menuBg: #304156;
}
html.dark {--themeColor: #46ACFF;--menuBg: #263445;
}

main.js：

import './styles/index.scss'

话说回来，如果只是当作css变量一样使用scss变量，那为何不直接使用css变量呢？况且，css变量还可以使用js更改之

三、暗黑模式下的图片

暗黑模式下图片处理

在暗黑模式下显示图片，部分会比较亮，刺眼。可以使用CSS滤镜，设置图片的亮度、饱和度
除图片外，可将以图片为背景图的容器加上类 dark-img-bg 或其它css选择器

html.dark {img,.dark-img-bg {filter:brightness(0.8) saturate(1.25)}
}

基于 vue3 element-plus 的暗黑模式相关推荐

基于vue3 element plus form 表单的二次封装
记录一下开发中对form表单的二次封装及使用前言在我们的日常工作中经常会使用到form表来满足提交需求,那么将form表单封装成组件将会大大提高我们的工作效率,避免更多重复代码的书写,只需一些简单 ...
基于 vue3.x + vite + element plus，适配手机、平板、pc 的后台开源免费模板库
介绍 vue-next-admin 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + ...
微信iOS版内测暗黑模式；涉嫌恶意举报，社交平台Soul运营合伙人被批捕；AWS推出基于Linux开源操作系统 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
vite打包快几款基于vue3和vite的开箱即用的中后台管理模版
vite打包快的原因: 冷启动 1.esbuild构建依赖,go语言编写多线程打包. 2.原生的esm方式提供源码,浏览器分担了一部分工作. HMR热更新 1.缓存机制,利用浏览器http头部,源码模 ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
多款非常优秀的基于 vue3.x 、Native UI、TypeScript 的中后台管理系统模板
前言今天给大家分享5款开源且非常优秀的基于 vue3.x . Native UI 的中后台管理系统模板,助力大家快速开发一个中后台管理系统 Soybean Admin 简介 Soybean Admi ...
为什么 APP 纷纷开发“暗黑模式”？优酷最佳实践总结
简介: < 优酷 APP 全量支持"暗黑模式" 设计与技术完整总结>正式发布-- 一.缘起随着iOS 13和Android 10的正式发布,一个名词"暗 ...
苹果iOS 13暗黑模式概念图曝光将于iOS 13.1版本更新
iOS的暗黑模式一直是广大用户迫切关注的功能之一.此前在iOS 12发布之际,很多用户都非常期待苹果可以推出基于iOS的深色主题模式,网友们也将这种模式称为"暗黑模式".iOS 1 ...
Google Chrome进入暗黑模式
Google Chrome进入暗黑模式启用此功能后,Chrome 会让用户选择各种设置,以确定浏览器如何强制在网站上使用黑暗模式主题. 各种设置如下: Enabled (启用) Enabled wi ...

基于 vue3 element-plus 的暗黑模式

前言