曹睿
2025-04-22 2fa9c764993b4a7ad51754d0e8587990f96f1529
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { defineStore } from "pinia";
import { ref } from "vue";
 
// 从缓存获取主题色
const getThemeColor = (): string => {
  const savedColor = uni.getStorageSync("themeColor");
  return savedColor || "#165DFF"; // 默认Arco蓝色
};
 
// 保存主题色到缓存
const setThemeColorCache = (color: string) => {
  uni.setStorageSync("themeColor", color);
};
 
export const useThemeStore = defineStore("theme", () => {
  // 主题色
  const primaryColor = ref<string>(getThemeColor());
 
  // 设置主题色
  const setPrimaryColor = (color: string) => {
    primaryColor.value = color;
    setThemeColorCache(color);
 
    // 设置CSS变量,方便全局使用
    document.documentElement.style.setProperty("--primary-color", color);
 
    // 计算衍生色
    const lighterColor = getLighterColor(color, 0.8);
    const darkerColor = getDarkerColor(color, 0.8);
    document.documentElement.style.setProperty("--primary-color-light", lighterColor);
    document.documentElement.style.setProperty("--primary-color-dark", darkerColor);
  };
 
  // 获取浅色版本主题色
  const getLighterColor = (hexColor: string, factor: number): string => {
    // 去掉#前缀
    const hex = hexColor.replace("#", "");
 
    // 解析RGB值
    let r = parseInt(hex.substring(0, 2), 16);
    let g = parseInt(hex.substring(2, 4), 16);
    let b = parseInt(hex.substring(4, 6), 16);
 
    // 调亮颜色
    r = Math.min(255, Math.floor(r + (255 - r) * factor));
    g = Math.min(255, Math.floor(g + (255 - g) * factor));
    b = Math.min(255, Math.floor(b + (255 - b) * factor));
 
    // 转回16进制
    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
  };
 
  // 获取深色版本主题色
  const getDarkerColor = (hexColor: string, factor: number): string => {
    // 去掉#前缀
    const hex = hexColor.replace("#", "");
 
    // 解析RGB值
    let r = parseInt(hex.substring(0, 2), 16);
    let g = parseInt(hex.substring(2, 4), 16);
    let b = parseInt(hex.substring(4, 6), 16);
 
    // 调暗颜色
    r = Math.max(0, Math.floor(r * factor));
    g = Math.max(0, Math.floor(g * factor));
    b = Math.max(0, Math.floor(b * factor));
 
    // 转回16进制
    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
  };
 
  // 初始化,应用主题色
  const initTheme = () => {
    setPrimaryColor(primaryColor.value);
  };
 
  return {
    primaryColor,
    setPrimaryColor,
    initTheme,
  };
});