build: 📦 移除color依赖,自定义工具类
This commit is contained in:
@@ -53,7 +53,6 @@
|
|||||||
"axios": "^1.7.7",
|
"axios": "^1.7.7",
|
||||||
"codemirror": "^5.65.17",
|
"codemirror": "^5.65.17",
|
||||||
"codemirror-editor-vue3": "^2.7.0",
|
"codemirror-editor-vue3": "^2.7.0",
|
||||||
"color": "^4.2.3",
|
|
||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"element-plus": "^2.8.1",
|
"element-plus": "^2.8.1",
|
||||||
"exceljs": "^4.4.0",
|
"exceljs": "^4.4.0",
|
||||||
@@ -73,7 +72,6 @@
|
|||||||
"@commitlint/config-conventional": "^18.6.3",
|
"@commitlint/config-conventional": "^18.6.3",
|
||||||
"@iconify-json/ep": "^1.2.0",
|
"@iconify-json/ep": "^1.2.0",
|
||||||
"@types/codemirror": "^5.60.15",
|
"@types/codemirror": "^5.60.15",
|
||||||
"@types/color": "^3.0.6",
|
|
||||||
"@types/lodash": "^4.17.7",
|
"@types/lodash": "^4.17.7",
|
||||||
"@types/node": "^20.16.5",
|
"@types/node": "^20.16.5",
|
||||||
"@types/nprogress": "^0.2.3",
|
"@types/nprogress": "^0.2.3",
|
||||||
|
|||||||
52
src/utils/theme.ts
Normal file
52
src/utils/theme.ts
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
// 辅助函数:将十六进制颜色转换为 RGB
|
||||||
|
function hexToRgb(hex: string): [number, number, number] {
|
||||||
|
const bigint = parseInt(hex.slice(1), 16);
|
||||||
|
return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 辅助函数:将 RGB 转换为十六进制颜色
|
||||||
|
function rgbToHex(r: number, g: number, b: number): string {
|
||||||
|
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 辅助函数:调整颜色亮度
|
||||||
|
function adjustBrightness(hex: string, factor: number): string {
|
||||||
|
const rgb = hexToRgb(hex);
|
||||||
|
const newRgb = rgb.map((val) =>
|
||||||
|
Math.max(0, Math.min(255, Math.round(val + (255 - val) * factor)))
|
||||||
|
) as [number, number, number];
|
||||||
|
return rgbToHex(...newRgb);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateThemeColors(primary: string) {
|
||||||
|
const colors: Record<string, string> = {
|
||||||
|
primary,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成浅色变体
|
||||||
|
for (let i = 1; i <= 9; i++) {
|
||||||
|
const factor = i * 0.1;
|
||||||
|
colors[`primary-light-${i}`] = adjustBrightness(primary, factor);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成深色变体
|
||||||
|
colors["primary-dark-2"] = adjustBrightness(primary, -0.2);
|
||||||
|
|
||||||
|
return colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function applyTheme(colors: Record<string, string>) {
|
||||||
|
const el = document.documentElement;
|
||||||
|
|
||||||
|
Object.entries(colors).forEach(([key, value]) => {
|
||||||
|
el.style.setProperty(`--el-color-${key}`, value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toggleDarkMode(isDark: boolean) {
|
||||||
|
if (isDark) {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user