设置方法

通过设置主要颜色变量实现换肤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
export const setHtmlStyleProp = () => {
    /** 变量前缀 */
    const PRE = '--el-color-primary'
    /** 浅色变量前缀 */
    const PRE_LIGHT = `${PRE}-light`
    /** 深色变量前缀 */
    const PRE_DARK = `${PRE}-dark`
    /** 色阶 */
    const Levels = [3, 5, 7, 8, 9]

    /** 白色 */
    const WHITE = '#FFFFFF'
    /** 黑色 */
    const BLACK = '#000000'

    const config = useConfig()
    let color:string = config.getColorVal("primaryColor")
    const html = document.documentElement
    /**
     * 混合颜色
     */
    const mix = (color1: string, color2: string, weight: number) => {
        weight = Math.max(Math.min(Number(weight), 1), 0)
        const r1 = parseInt(color1.substring(1, 3), 16)
        const g1 = parseInt(color1.substring(3, 5), 16)
        const b1 = parseInt(color1.substring(5, 7), 16)
        const r2 = parseInt(color2.substring(1, 3), 16)
        const g2 = parseInt(color2.substring(3, 5), 16)
        const b2 = parseInt(color2.substring(5, 7), 16)
        const r = Math.round(r1 * (1 - weight) + r2 * weight)
        const g = Math.round(g1 * (1 - weight) + g2 * weight)
        const b = Math.round(b1 * (1 - weight) + b2 * weight)
        const _r = ('0' + (r || 0).toString(16)).slice(-2)
        const _g = ('0' + (g || 0).toString(16)).slice(-2)
        const _b = ('0' + (b || 0).toString(16)).slice(-2)
        return '#' + _r + _g + _b
    }
    // 设置主要颜色变量 --el-color-primary
    html.style.setProperty(PRE, color)
    // 循环设置色阶颜色
    // --el-color-primary-light-${level}
    Levels.forEach(level => {
        html.style.setProperty(`${PRE_LIGHT}-${level}`, mix(color, WHITE, level * 0.1))
    })
    // 设置主要暗色
    // --el-color-primary-dark-2
    const dark = mix(color, BLACK, 0.2)
    html.style.setProperty(`${PRE_DARK}-2`, dark)
}