第七章 项目布局实现（7.4.6）——暗黑模式切换功能

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" 的类名即可切换为暗黑模式。

1. 导入暗黑主题 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 *;
   // ----------
   
   

2. 修改 src/layout/layoutHeader/Head