当前位置：首页 > news >正文

vite-vue-ts使用arco-design-vue定制主题的后动态变更主题思路

news 来源：原创 2025/9/20 14:59:06

定制主题的后动态变更主题思路

安装依赖与主题定制
动态变更主题过程
- 尝试修改主题色（结果失败）
- 尝试修改主题色（结果成功，但是hover的主题色没有变，未覆盖10个梯度的色值）
- 根据主题色实现10个梯度颜色
- - 实现10个梯度颜色方式（使用方式二）
  - 安装@arco-design/color
  - 使用@arco-design/color，实现动态主题

安装依赖与主题定制

1、根据官方提供的安装方式安装vue版本的arco-design

pnpm add @arco-design/web-vue

app.ts引入配置

import { createApp } from 'vue'
import App from './App.vue';
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.less'const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

2、根据官方提供的vite配置，实现定制项目主题色

// vite.config.js
export default {css: {
+   preprocessorOptions: {
+     less: {
+       modifyVars: {
+         'arcoblue-6': '#165DFF',
+       },
+       javascriptEnabled: true,
+     }
+   }},...
}

这里做个解释：为什么定制主题是设置arcoblue-6的颜色，而不是设置arcoblue-1或者arcoblue-2或者其他的键？因为arco-design使用Palette 色彩工具将 6 号色作为色板中的主色，分为 10 个梯度，向下到1，向上到10。arcoblue-6定制的颜色会生成arcoblue-1到arcoblue-10等10个颜色值

动态变更主题过程

需要将定制主题色（#165DFF）修改成（#00D7E5）

尝试修改主题色（结果失败）

代码如下：

// 修改body的内联样式
document.body.style.setProperty(`--arcoblue-6`, '#00D7E5')

尝试修改主题色（结果成功，但是hover的主题色没有变，未覆盖10个梯度的色值）

由于将主题色设置成16进制的值(#00D7E5)会导致修改颜色失败，所以查找arco-design源码目录编译后的css文件（/node_modules/@arco-design/web-vue/dist/arco.css），发现编译后的值是rgb中色值。
在这里插入图片描述
在次尝试修改，代码如下：

// 修改body的内联样式
document.body.style.setProperty(`--arcoblue-6`, '0,215,229')

结果修改色值成功了，但是hover后还是显示未修改前的主题色，在浏览器控制台发现，hover后使用的是–arcoblue-5的色值，所以想要完整修改主题色，需要将色值编译成10个梯度，覆盖（–arcoblue-1）到（–arcoblue-10）等10个颜色。

根据主题色实现10个梯度颜色

实现10个梯度颜色方式（使用方式二）

1、arco-design提供了Palette 色彩工具的说明和Palette 网址可以根据传入的16进制色值生成10个梯度的颜色，但是只适合项目初期的颜色设置，无法实现动态色值切换。

2、使用arco-design提供的设置转换工具来@arco-design/color实现主题色转出10个梯度的色值。
之所以知道@arco-design/color这个工具，是因为在查找源码的过程中发现的，在/node_modules/@arco-design/web-vue/es/style/color/color.less中使用palette.js来生成色值，palette.js文件引用@arco-design/color这个工具

安装@arco-design/color

pnpm add @arco-design/color

使用@arco-design/color，实现动态主题

import { generate, getRgbStr } from '@arco-design/color'

解决ts报错问题：

报错：无法找到模块“@arco-design/color”的声明文件。“D:/projects/node_modules/.pnpm/@arco-design+color@0.4.0/node_modules/@arco-design/color/src/index.js”隐式拥有 “any” 类型。
尝试使用 npm i --save-dev @types/arco-design__color (如果存在)，或者添加一个包含 declare module '@arco-design/color'; 的新声明(.d.ts)文件ts-plugin(7016)

@arco-design/color是common.js，所以在vite-vue-ts项目中使用会报错。需要在vite-env.d.ts文件中加 declare module '@arco-design/color’类型，如下：

/// <reference types="vite/client" />declare module '@arco-design/color' {export function generate(/*** 颜色值类型 #00D7E5*/color: string,/*** 不设置options，generate返回color传入的色值*/options?: {/*** 1 - 10 (default: 6),generate返回指定层级的色值*/index?: number/*** 开启暗黑模式*/dark?: boolean/*** 开启，generate返回颜色值列表（1-10）*/list?: booleanformat?: 'hex' | 'rgb' | 'hsl'}): string | string[]/**** @param color 颜色值类型 #00D7E5* @return 0,215,229  用于设置颜色*/export function getRgbStr(color: string): string
}

在项目中使用，配置可以看@arco-design/color

方式一：通过设置body内联样式使用

import { generate, getRgbStr } from '@arco-design/color'export const useColorTheme = () => {const updateThemeColor = (color: string, dark?: boolean) => { // '#00D7E5'const colorList = generate(color, { list: true, dark }) as string[]if(dark){document.body.setAttribute('arco-theme', 'dark')}else{document.body.removeAttribute('arco-theme');}colorList.forEach((color: string, index: number) => {document.body.style.setProperty(`--arcoblue-${index + 1}`, getRgbStr(color))})}return {updateThemeColor,}
}

组件中使用

import { useColorTheme } from '@/util/theme'
const {updateThemeColor} = useColorTheme()
updateThemeColor('#00D7E5')

方式二：通过设置style样式使用

import { generate, getRgbStr } from '@arco-design/color'export const useColorTheme = () => {const createStyleString = (color: string, dark?: boolean) => {const colorList = generate(color, { list: true, dark }) as string[]return colorList.map((color: string, index: number) => {return `--arcoblue-${index + 1}: ${getRgbStr(color)};`}).join('')}const updateThemeColor = (color: string, dark?: boolean) => {if(dark){document.body.setAttribute('arco-theme', 'dark')}else{document.body.removeAttribute('arco-theme');}const style = createStyleString(color, dark)const themeBody = dark ? `body[arco-theme='dark'] {${style}}` :`body{${style}}`insertStyle(themeBody)}const insertStyle = (themeBody: string) => {let currentStyle = document.getElementById('theme-color')if (currentStyle) {currentStyle.innerHTML = themeBody} else {currentStyle = document.createElement('style')currentStyle.id = 'theme-color'currentStyle.innerHTML = themeBodydocument.head.appendChild(currentStyle)}}return {updateThemeColor,}
}