chore: Optimize multi-theme switching

packages/@core/shared/toolkit/package.json

@@ -36,7 +36,6 @@
     }
   },
   "dependencies": {
-    "@ctrl/tinycolor": "4.1.0",
     "@vue/shared": "^3.4.30",
     "clsx": "2.1.1",
     "dayjs": "^1.11.11",

packages/@core/shared/toolkit/src/color.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { convertToHsl, convertToHslCssVar, isValidColor } from './color';
-
-describe('color conversion functions', () => {
-  it('should correctly convert color to HSL format', () => {
-    const color = '#ff0000';
-    const expectedHsl = 'hsl(0 100% 50%)';
-    expect(convertToHsl(color)).toEqual(expectedHsl);
-  });
-
-  it('should correctly convert color with alpha to HSL format', () => {
-    const color = 'rgba(255, 0, 0, 0.5)';
-    const expectedHsl = 'hsl(0 100% 50%) 0.5';
-    expect(convertToHsl(color)).toEqual(expectedHsl);
-  });
-
-  it('should correctly convert color to HSL CSS variable format', () => {
-    const color = '#ff0000';
-    const expectedHsl = '0 100% 50%';
-    expect(convertToHslCssVar(color)).toEqual(expectedHsl);
-  });
-
-  it('should correctly convert color with alpha to HSL CSS variable format', () => {
-    const color = 'rgba(255, 0, 0, 0.5)';
-    const expectedHsl = '0 100% 50% / 0.5';
-    expect(convertToHslCssVar(color)).toEqual(expectedHsl);
-  });
-});
-
-describe('isValidColor', () => {
-  it('isValidColor function', () => {
-    // 测试有效颜色
-    expect(isValidColor('blue')).toBe(true);
-    expect(isValidColor('#000000')).toBe(true);
-
-    // 测试无效颜色
-    expect(isValidColor('invalid color')).toBe(false);
-    expect(isValidColor()).toBe(false);
-  });
-});

packages/@core/shared/toolkit/src/color.ts

@@ -1,44 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-/**
- * 将颜色转换为HSL格式。
- *
- * HSL是一种颜色模型，包括色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个部分。
- * 这个函数使用TinyColor库将输入的颜色转换为HSL格式，并返回一个字符串。
- *
- * @param {string} color 输入的颜色，可以是任何TinyColor支持的颜色格式。
- * @returns {string} HSL格式的颜色字符串。
- */
-function convertToHsl(color: string): string {
-  const { a, h, l, s } = new TinyColor(color).toHsl();
-  const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
-  return a < 1 ? `${hsl} ${a}` : hsl;
-}
-
-/**
- * 将颜色转换为HSL CSS变量。
- *
- * 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
- * 以便可以作为CSS变量使用。
- *
- * @param {string} color 输入的颜色，可以是任何TinyColor支持的颜色格式。
- * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
- */
-function convertToHslCssVar(color: string): string {
-  const { a, h, l, s } = new TinyColor(color).toHsl();
-  const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-  return a < 1 ? `${hsl} / ${a}` : hsl;
-}
-
-/**
- * 检查颜色是否有效
- * @param {string} color - 待检查的颜色
- * 如果颜色有效返回true，否则返回false
- */
-function isValidColor(color?: string) {
-  if (!color) {
-    return false;
-  }
-  return new TinyColor(color).isValid;
-}
-
-export { TinyColor, convertToHsl, convertToHslCssVar, isValidColor };

packages/@core/shared/toolkit/src/index.ts

@@ -1,5 +1,4 @@
 export * from './cn';
-export * from './color';
 export * from './diff';
 export * from './hash';
 export * from './inference';
@@ -8,4 +7,5 @@ export * from './merge';
 export * from './namespace';
 export * from './nprogress';
 export * from './tree';
+export * from './update-css-variables';
 export * from './window';

packages/@core/shared/toolkit/src/update-css-variables.test.ts

@@ -0,0 +1,30 @@
+import { expect, it } from 'vitest';
+
+import { updateCSSVariables } from './update-css-variables';
+
+it('updateCSSVariables should update CSS variables in :root selector', () => {
+  // 模拟初始的内联样式表内容
+  const initialStyleContent = ':root { --primaryColor: red; }';
+  document.head.innerHTML = `<style id="custom-styles">${initialStyleContent}</style>`;
+
+  // 要更新的CSS变量和它们的新值
+  const updatedVariables = {
+    fontSize: '16px',
+    primaryColor: 'blue',
+    secondaryColor: 'green',
+  };
+
+  // 调用函数来更新CSS变量
+  updateCSSVariables(updatedVariables, 'custom-styles');
+
+  // 获取更新后的样式内容
+  const styleElement = document.querySelector('#custom-styles');
+  const updatedStyleContent = styleElement ? styleElement.textContent : '';
+
+  // 检查更新后的样式内容是否包含正确的更新值
+  expect(
+    updatedStyleContent?.includes('primaryColor: blue;') &&
+      updatedStyleContent?.includes('secondaryColor: green;') &&
+      updatedStyleContent?.includes('fontSize: 16px;'),
+  ).toBe(true);
+});

packages/@core/shared/toolkit/src/update-css-variables.ts

@@ -0,0 +1,35 @@
+/**
+ * 更新 CSS 变量的函数
+ * @param variables 要更新的 CSS 变量与其新值的映射
+ */
+function updateCSSVariables(
+  variables: { [key: string]: string },
+  id = '__vben-styles__',
+): void {
+  // 获取或创建内联样式表元素
+  const styleElement =
+    document.querySelector(`#${id}`) || document.createElement('style');
+
+  styleElement.id = id;
+
+  // 构建要更新的 CSS 变量的样式文本
+  let cssText = ':root {';
+  for (const key in variables) {
+    if (Object.prototype.hasOwnProperty.call(variables, key)) {
+      cssText += `${key}: ${variables[key]};`;
+    }
+  }
+  cssText += '}';
+
+  // 将样式文本赋值给内联样式表
+  styleElement.textContent = cssText;
+
+  // 将内联样式表添加到文档头部
+  if (!document.querySelector(`#${id}`)) {
+    setTimeout(() => {
+      document.head.append(styleElement);
+    });
+  }
+}
+
+export { updateCSSVariables };