7.4.6 暗黑模式切换功能
Element Plus
参考:https://cn.element-plus.org/zh-CN/guide/dark-mode.html
VueU
参考:https://vueuse.org/core/useDark/
Element Plus 2.2.0+
版本支持暗黑模式,导入暗黑样式文件,然后在 index.html
的 html
标签上添加一个 class="dark"
的类名即可切换为暗黑模式。
-
导入暗黑主题
css
变量文件// src/styles/index.scss @use 'base.scss'; @use '@unocss/reset/tailwind-compat.css'; // ++++++++++ @use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *; // ----------
-
修改
src/layout/layoutHeader/Head