这篇文章主要介绍“基于vue3和element-plus的暗黑模式如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于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>
暗黑模式中,一旦混入非深色样式,就会非常难看刺眼,一些自定义样式的暗黑模式适配是少不了的
element-plus定义了一些暗黑模式下的变量,满足其自身样式的暗黑模式适配
项目中设定了颜色的样式是无法自动适配的,需要我们手动写一套深色样式来覆盖
html.dark { .my-dialog { background-color: #304156; color: #bfcbd9; } }
一些反复使用的样式可以定义成变量重用,这样,就可以通过简单的变量覆盖来适配暗黑模式
:root { --theme-color: #409EFF; } html.dark { --theme-color: #135fad; } .demo-class {background-color:var(--theme-color)} .demo-class-one button {color:var(--theme-color)}
如果想更改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'
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更改之
CodePen上发现的一行代码的方案 Dark mode image filter
其实是通过使用 CSS3 filter 设置图片的亮度、饱和度:
filter: brightness(0.8) saturate(1.25);
在暗黑模式下显示图片,部分会比较亮,刺眼。可以使用CSS滤镜,设置图片的亮度、饱和度
除图片外,可将以图片为背景图的容器加上类 dark-img-bg 或其它css选择器
html.dark { img, .dark-img-bg {filter:brightness(0.8) saturate(1.25)} }
关于“基于vue3和element-plus的暗黑模式如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。