Nuxt3 使用Arco Design组件库简单地实现动态切换主色

Arco Design的主颜色默认使用css变量指向了他们的Arco Blue 蓝色

最近写东西刚好需要在前端打包完以后也能根据后台的颜色配置替换主色, 如果你也需要, 这个文章获取可以帮到你

所以只要在body上面替换这些变量就可以轻松的实现替换Arco Design主色

我的思路就是我们输入一个主色, 然后利用js生成10个色阶, 将10个颜色替换进去就可以了

刚好Arco团队还有一个颜色库, 利用算法生成包含 10 种颜色的渐变色板, 还适用于浅色和深色模式

实现替换Arco Design主色

1. 安装以下依赖

npm i @arco-design/color

简单使用:

let colors // 颜色数组, 用于存放10个颜色
colors = generate("red", { // 根据主颜色生成10个色阶
        list: true, // 生成列表
        dark: true // 是否为深色模式
    })

以上方法就会生成10个基于红色的色阶, 打印出来是这样的

而且dark如果为false的话, 生成出来的10个颜色也是不一样的, 所以这个库生成的颜色对浅色和深色模式都可以用

然后我们就可以将这10个颜色放在body上面, 用于覆盖Arco Design的默认主色

2. Nuxt3参考以下方法 (ssr友好)

export const initPrimaryColor = (color) => {
    // 初始化主颜色css变量
    let primaryColors = []

    // 当前主题 (这里写死了,实际根据你的当前主题)
    const theme = 'dark'

    primaryColors = generate(color, { // 根据主颜色生成10个色阶
        list: true, // 生成列表
        dark: theme == 'dark ' // 是否为深色模式
    })
    primaryColors = primaryColors.map(color => getRgbStr(color)) // 提取字符串中的 r、g、b 值

    useHead({
        bodyAttrs: {
            style: `
                --primary-1: ${primaryColors[0]};
                --primary-2: ${primaryColors[1]};
                --primary-3: ${primaryColors[2]};
                --primary-4: ${primaryColors[3]};
                --primary-5: ${primaryColors[4]};
                --primary-6: ${primaryColors[5]};
                --primary-7: ${primaryColors[6]};
                --primary-8: ${primaryColors[7]};
                --primary-9: ${primaryColors[8]};
                --primary-10: ${primaryColors[9]};
              `
        }
    })
}

如果你没有用ssr框架, 可以直接用那10个颜色遍历, 往body上面添加变量, 例如下面这样

document.body.style.setProperty(`--primary-序号`, `值`)

3. 效果

经过以上操作, 可以轻而易举地替换主色, 在程序打包完以后也可以利用接口获取主色来替换前端的主色

参考上面的思路, Arco的其他css变量也可以这样替换😎, 虽然这样实现很粗暴, 但是确实很简单的