Vue3自定义Hooks一键换肤教程

迈不过友情╰ 2024-04-29 11:38 81阅读 0赞

## 核心 ##

*  **使用CSS变量, 准备两套CSS颜色**, 一套是在 light模式下的颜色,一套是在dark模式下的颜色
 *  **dark模式下的 CSS 权重要比 light 模式下的权重高**, 不然当我们给html添加自定义属性`[data-theme='dark']`的时候, dark模式权重比light低,会一直不起效果
 *  当我们点击 dark 模式的时候, 给 html 设置自定义属性`[data-theme='dark']`
 *  当我们点击 light 模式的时候, 给 html 设置自定义属性`[data-theme='light']`
 *  在 dark 模式下, 会匹配到`html[data-theme='dark']`选择器下的样式
 *  在 light 模式下,由于我们没有设置`html[data-theme='light']`的方案, 那么他就匹配:root(即html)下的样式

两套样式代码大概如下(列了一部分):

:root {
      --color-body-bg: #ffffff;
      --color-text: #000;
      --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
    }
    
    html[data-theme='dark'] {
      --color-body-bg: #222222;
      --color-text: #ffffff;
      --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
    }

然后我们点击的时候,通过

let theme = 'light'            // light / dark  
     document.documentElement.setAttribute('data-theme', theme)

这样就能实现简单的更换肤色功能了

什么? 你以为这就完了?好戏刚开始

## 跟随系统颜色 ##

首先利用`Window` 的 ['matchMedia()'][matchMedia] 方法返回一个新的 [MediaQueryList][] 对象，表示指定的[媒体查询 (en-US)][_en-US]字符串解析后的结果。

如运行媒体查询`(max-width: 600px)`并在;中显示`MediaQueryList`的`matches`属性值。如果视口的宽度小于或等于 600 像素，则输出将为 true，而如果窗口的宽度大于此宽度，则将输出 false。

![523ce202402261100158558.png][]

let mql = window.matchMedia('(max-width: 600px)');
    document.querySelector(".mq-value").innerText = mql.matches; //此时小于或等于600像素时span 里面的结果为false

利用`prefers-color-scheme` **\[CSS媒体特性\]** 用于**检测**用户是否有将**系统的主题色**设置为亮色或者暗色。

.day   { background: #eee; color: black; }
    .night { background: #333; color: white; }
    
    @media (prefers-color-scheme: dark) {
      .day.dark-scheme   { background:  #333; color: white; }
      .night.dark-scheme { background: black; color:  #ddd; }
    }
    
    @media (prefers-color-scheme: light) {
      .day.light-scheme   { background: white; color:  #555; }
      .night.light-scheme { background:  #eee; color: black; }
    }

### 两者相结合 ###

把`matchMedia()`和`prefers-color-scheme` 结合在一起, 我们就可以通过 js 去给系统颜色为dark或 light 的情况下更换对应的 html自定义属性, 即`[data-theme='dark']`或  
`[data-theme='light']`

首先，我们先去获取主题颜色, 我们还没设置的时候,就默认是系统颜色, 设置了就把他存储起来,下次直接获取这个颜色

// 获取主题变量
    let appearance = ref(localStorage.getItem('appearance') || 'auto')
    
    // 查询当前系统主题颜色
    const match = window.matchMedia("(prefers-color-scheme: dark)")
    
    // 如果主题变量为 auto, 则跟随系统主题
    if (appearance.value === 'auto') {
        followSystem()
    } else {
        document.documentElement.setAttribute('data-theme', appearance.value)
    }
    
    function followSystem() {
        // 当前系统颜色是亮色还是暗色 , 设置对应的html[data-theme= 'dark' 或者'light']
        const theme = match.matches ? 'dark' : 'light'
        document.documentElement.setAttribute('data-theme', theme)
    }
    
    // 监听系统主题变化,电脑主题发生改变的时候就调用followSystem函数
    match.addEventListener('change', followSystem)

## 封装成一个hooks ##

暴露出一个 useThemeColor函数, 返回一个对象, **对象里面返回我们的主题变量**

/ 获取主题变量
    let appearance = ref(localStorage.getItem('appearance') || 'auto')
    // 查询当前系统主题颜色
    const match:MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
    // 监听系统主题变化
    match.addEventListener('change', followSystem)
    
    function followSystem() {
        const theme = match.matches ? 'dark' : 'light'
        document.documentElement.setAttribute('data-theme', theme)
    }
    
    watchEffect(() => {
    // 如果主题变量为 auto, 则跟随系统主题
        if (appearance.value === 'auto') {
            followSystem()
        } else {
            document.documentElement.setAttribute('data-theme', appearance.value)
        }
    })
    
    
    export default function useThemeColor() {
        return {
            appearance,
        }
    }

## 使用hooks ##

导入我们export出来的函数

import useThemeColor from '../hooks/useThemeColor'

使用函数，注意, 这里**返回的 apprance 已经是一个响应式数据**了

const { appearance } = useThemeColor()

使用 **v-model 绑定apprance**，直接使用apprance , 当我们**切换颜色**的时候, 就会**调用watchEffect里面的函数**, 达到一键换肤效果

![bdfa8202402261100442073.png][]

[matchMedia]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia
[MediaQueryList]: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList
[_en-US]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
[523ce202402261100158558.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/5c7f68d47f31430d88bca0cfa1772e21.png
[bdfa8202402261100442073.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/76e34fde4fb34e78804977dbe0d250d2.png