关于element-plus暗黑主题的探索
2022/7/10 6:20:16
本文主要是介绍关于element-plus暗黑主题的探索,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
参考:
暗黑模式
useDark
useDark/demo.vue
useToggle
全局启用暗黑主题
1、在 public/index.html 文件 html 标签上添加一个名为 dark 的 class
2、然后在项目入口文件(可以是 main.js 或者 App.vue)导入 css
import 'element-plus/theme-chalk/dark/css-vars.css'
动态切换主题
1、先把 html 标签上的 dark class 去掉。
2、在项目入口文件(可以是 main.js 或者 App.vue)导入 css
import 'element-plus/theme-chalk/dark/css-vars.css'
css-vars.css 除了设置
color-scheme: dark;
切换成 vue 的 dark主题之外,还对很多 element 组件的样式进行了定义。
3、打开需要主题切换按钮的 vue 文件
在 <script>
中导入 vueuse 的 useDark
import {useDark, useToggle} from '@vueuse/core'
新建一个方法,用来控制暗黑主题的开关
<script> import {useDark, useToggle} from '@vueuse/core' const isDark = useDark() export default { name: 'App', methods: { switchThemes() { const toggleDark = useToggle(isDark) console.log(toggleDark()) } } } </script>
在我们的控制 button 上绑定该方法
<el-button @click="switchThemes()">暗黑模式</el-button>
大功告成。
4、自定义 useDark
By default, it uses Tailwind CSS favored dark mode, which enables dark mode when class
dark
is applied to thehtml
tag
默认作用在 html 标签上,我们可以指定更细粒度的网页元素。
const isDark = useDark({ selector: 'body', attribute: 'color-scheme', valueDark: 'dark', valueLight: 'light', })
这样修改过后,useDark 就只作用于带有 color-scheme
属性的 body
标签,并且根据 color-scheme="dark"
或者 color-scheme="light"
来静态设置主题。
可以点进 useDark 的源代码看到默认配置
除此之外,还可以为 useDark 配置 dom 变更的监听方法
相当于重写了 useDark 切换主题的逻辑,一旦配置则原主题切换功能失效。
const isDark = useDark({ onChanged(dark: boolean) { // update the dom, call the API or something }, })
5、最终效果
Light
Dark
重写主题样式变量
1、通过 CSS
新建 src/styles/dark/css-vars.css,加上我们自定义的样式。
这里举个例子:
html.dark { /*设置 vue 的主题,light 或者 dark*/ /*color-scheme: light;*/ /*猜测是vue dark 主题下 element 组件的背景颜色*/ /*--el-bg-color: green;*/ } html.dark .el-button { /*vue dark 主题下 element 禁用按钮的文字颜色*/ /*--el-button-disabled-text-color: red;*/ }
在暗黑主题 css 导入下方加上我们自定义的 css
import './styles/dark/css-vars.css'
这样我们就可以对所有原暗黑主题 css 文件中的样式变量进行重写,会覆盖生效。
可以点进 css 源码,拷贝出来格式化看有哪些样式。
对其他 element 组件重写 CSS
除了暗黑主题外,我们也可以对其他的 element 组件进行 css 重写。
可以通过浏览器 f12 找到对应的 css 变量名,然后在我们当前 vue 的 css 或者 全局 css 中重写 element 组件的样式。
举个例子:
f12 找到元素的样式变量
重写 css
效果
2、通过 SCSS
略,参照 element-plus 指南。
对 vue dark主题下的其他网页元素重写 CSS
我希望在切换 dark 主题后,不仅只有 element 的组件会变更样式(依据暗黑模式 css 样式表),还希望对其他的网页元素比如 markdown 样式也做变更来适配 dark 主题。
vue 其实已经在 dark 主题下对一部分网页元素样式做了默认修改,比如背景字体颜色。
那我们如何自定义 dark 下的元素 CSS 呢?
还是通过上面我们新建的 src/styles/dark/css-vars.css 样式表。
先找到一个网页元素,比如下面的 h2
我们重写它在 dark 下的样式
/*src/styles/dark/css-vars.css*/ html.dark h2 { font-size: 3.5em; }
最终就实现了切换 dark,元素样式也跟着变换的效果。
这篇关于关于element-plus暗黑主题的探索的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)