feat: 增加定制配色模式

zhangnuoyan

2024-08-24 a1f7104959fcefe9940f849456cda934858c5733

 src/hooks/useTheme.ts

@@ -3,13 +3,14 @@
const themeModeOptions = [
    { label: "亮色模式", value: "light" },
    { label: "暗色模式", value: "dark" },
    { label: "定制模式", value: "custom" },
    { label: "跟随系统", value: "auto" }
];

const defaultTheme: any = localStorage.getItem("arco-theme") || "auto";

const currentTheme = ref<"light" | "dark">(defaultTheme);
const currentThemeMode = ref<"light" | "dark" | "auto">(defaultTheme);
const currentThemeMode = ref<"light" | "dark" | "auto" | "custom">(defaultTheme);

export const useTheme = () => {
    //设置自动主题模式
@@ -23,7 +24,7 @@
    };

    //设置手动主题模式
    const setManualTheme = (v: "light" | "dark") => {
    const setManualTheme = (v: "light" | "dark" | "custom") => {
        localStorage.setItem("arco-theme", v);
        currentThemeMode.value = v;
        currentTheme.value = v;
@@ -35,7 +36,7 @@
    darkModeQuery.addListener(setAutoTheme);

    //用于处理手动切换主题
    const handleThemeChange = (v: "light" | "dark" | "auto") => {
    const handleThemeChange = (v: "light" | "dark" | "auto" | "custom") => {
        if (v === "auto") {
            currentThemeMode.value = "auto";
            setAutoTheme();