@particle-network/ui-react 0.5.1-beta.2 → 0.5.1-beta.21

package/dist/components/UXSwitch/switch.extend.js

@@ -48,9 +48,9 @@ const ExtendedSwitch = extendVariants(Switch, {
         },
         size: {
             sm: {
-                wrapper: 'w-5 h-3 px-0.5',
+                wrapper: 'w-5 h-3 px-0.5 bg-cursor',
                 thumb: [
-                    'w-2 h-2 text-tiny',
+                    'w-2 h-2 text-tiny shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-tiny',
@@ -58,9 +58,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             md: {
-                wrapper: 'w-6 h-3.5 px-[3px]',
+                wrapper: 'w-6 h-3.5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-2.5 h-2.5 text-small',
+                    'w-2.5 h-2.5 text-small shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-small',
@@ -68,9 +68,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             lg: {
-                wrapper: 'w-[34px] h-5 px-[3px]',
+                wrapper: 'w-[34px] h-5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-3.5 h-3.5 text-medium',
+                    'w-3.5 h-3.5 text-medium shadow-none',
                     'group-data-[selected=true]:ms-3.5'
                 ],
                 endContent: 'text-medium',

package/dist/components/UXTabs/tabs.classes.js

@@ -252,9 +252,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary dark:bg-tertiary'
+                    'bg-cursor dark:bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {
@@ -264,9 +264,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary'
+                    'bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {

package/dist/components/UXThemeSwitch/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 默认字体
+ */
+export declare const DEFAULT_FONT_FAMILY = "Inter,system-ui,sans-serif,\"Microsoft YaHei\"";
+/**
+ * 预加载所有主题字体的 Google Fonts CSS
+ * 包含所有可能用到的字体，一次性加载，避免切换主题时重复加载
+ */
+export declare const PRELOAD_FONTS_URL = "https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap";

package/dist/components/UXThemeSwitch/constants.js

@@ -0,0 +1,3 @@
+const DEFAULT_FONT_FAMILY = 'Inter,system-ui,sans-serif,"Microsoft YaHei"';
+const PRELOAD_FONTS_URL = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap';
+export { DEFAULT_FONT_FAMILY, PRELOAD_FONTS_URL };

package/dist/components/UXThemeSwitch/custom-theme-config.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface CustomThemeConfigProps {
+    colorChangeMode?: 'drag' | 'dragEnd';
+}
+export declare const CustomThemeConfig: React.FC<CustomThemeConfigProps>;

package/dist/components/UXThemeSwitch/custom-theme-config.js

@@ -0,0 +1,172 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
+import { produce } from "immer";
+import { useI18n, useLang } from "../../hooks/index.js";
+import { HStack, VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXColorPicker } from "../UXColorPicker/index.js";
+import { UXSelect, UXSelectItem } from "../UXSelect/index.js";
+import { UXTab, UXTabs } from "../UXTabs/index.js";
+import { useTheme } from "./use-theme.js";
+const COLOR_CATEGORIES = {
+    basic: [
+        'primary',
+        'bullish',
+        'bearish'
+    ],
+    background: [
+        'bgDefault',
+        'bg400',
+        'bg300',
+        'bg200',
+        'cursor',
+        'overlay',
+        'divider'
+    ],
+    text: [
+        'foreground',
+        'secondary',
+        'tertiary'
+    ],
+    candle: [
+        'candleUp',
+        'candleBorderUp',
+        'candleWickUp',
+        'candleDown',
+        'candleBorderDown',
+        'candleWickDown'
+    ],
+    signal: [
+        'success',
+        'danger',
+        'warning',
+        'alert',
+        'blue'
+    ]
+};
+const CustomThemeConfig = ({ colorChangeMode = 'dragEnd' })=>{
+    const { lang } = useLang();
+    const i18n = useI18n();
+    const { theme, setTheme, setCustomTheme } = useTheme();
+    const baseThemes = useMemo(()=>themeData.filter((t)=>'custom' !== t.id), []);
+    const baseThemeId = theme.baseThemeId || DEFAULT_THEME_ID;
+    const baseTheme = useMemo(()=>themeData.find((t)=>t.id === baseThemeId) || themeData.find((t)=>t.id === DEFAULT_THEME_ID), [
+        baseThemeId
+    ]);
+    const handleBaseThemeChange = (themeId)=>{
+        const selectedBaseTheme = themeData.find((t)=>t.id === themeId);
+        if (selectedBaseTheme) {
+            const updatedTheme = {
+                ...theme,
+                baseThemeId: themeId,
+                colorScheme: selectedBaseTheme.colorScheme,
+                colorVariables: selectedBaseTheme.colorVariables
+            };
+            setTheme(updatedTheme);
+            setCustomTheme(updatedTheme);
+        }
+    };
+    const handleColorChange = (color, value)=>{
+        const updatedTheme = produce(theme, (draft)=>{
+            draft.colorVariables[color] = value;
+        });
+        setTheme(updatedTheme);
+        setCustomTheme(updatedTheme);
+    };
+    const handleSwapUpDown = ()=>{
+        const updatedTheme = produce(theme, (draft)=>{
+            const { bullish, bearish, candleUp, candleDown, candleWickUp, candleWickDown, candleBorderUp, candleBorderDown } = draft.colorVariables;
+            draft.colorVariables.bullish = bearish;
+            draft.colorVariables.bearish = bullish;
+            draft.colorVariables.candleUp = candleDown;
+            draft.colorVariables.candleDown = candleUp;
+            draft.colorVariables.candleWickUp = candleWickDown;
+            draft.colorVariables.candleWickDown = candleWickUp;
+            draft.colorVariables.candleBorderUp = candleBorderDown;
+            draft.colorVariables.candleBorderDown = candleBorderUp;
+        });
+        setTheme(updatedTheme);
+        setCustomTheme(updatedTheme);
+    };
+    const getColorValue = (color)=>theme.colorVariables[color] || baseTheme.colorVariables[color] || '#000000';
+    const renderColorItem = (color, label)=>{
+        const value = getColorValue(color);
+        const isCustomized = void 0 !== theme.colorVariables[color] && theme.colorVariables[color] !== baseTheme.colorVariables[color];
+        return /*#__PURE__*/ jsxs(HStack, {
+            justify: "between",
+            children: [
+                /*#__PURE__*/ jsx(Text, {
+                    color: "secondary",
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(UXColorPicker, {
+                    defaultValue: value,
+                    isChanged: isCustomized,
+                    onValueChange: 'drag' === colorChangeMode ? (newValue)=>handleColorChange(color, newValue) : void 0,
+                    onValueChangeEnd: 'dragEnd' === colorChangeMode ? (newValue)=>handleColorChange(color, newValue) : void 0,
+                    onReset: ()=>handleColorChange(color, baseTheme.colorVariables[color])
+                })
+            ]
+        }, color);
+    };
+    return /*#__PURE__*/ jsxs(VStack, {
+        gap: "lg",
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                justify: "between",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        body1Bold: true,
+                        children: i18n.theme.custom.title
+                    }),
+                    /*#__PURE__*/ jsx(UXButton, {
+                        variant: "text",
+                        color: "primary",
+                        onPress: handleSwapUpDown,
+                        children: i18n.theme.custom.swapUpDown
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(HStack, {
+                justify: "between",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        children: i18n.theme.custom.preset
+                    }),
+                    /*#__PURE__*/ jsx(UXSelect, {
+                        className: "min-w-48",
+                        selectedKeys: [
+                            baseThemeId
+                        ],
+                        onSelectionChange: (keys)=>{
+                            const selectedKey = Array.from(keys)[0];
+                            if (selectedKey) handleBaseThemeChange(selectedKey);
+                        },
+                        children: baseThemes.map((t)=>/*#__PURE__*/ jsx(UXSelectItem, {
+                                children: 'zh' === lang ? t.zhName : t.enName
+                            }, t.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(UXTabs, {
+                fullWidth: true,
+                variant: "switch",
+                children: Object.entries(COLOR_CATEGORIES).map(([category, colors])=>/*#__PURE__*/ jsx(UXTab, {
+                        title: i18n.theme.custom.categories[category],
+                        children: /*#__PURE__*/ jsx(VStack, {
+                            gap: "md",
+                            className: "pt-md",
+                            children: colors.map((color)=>{
+                                const label = i18n.colors[color] || color;
+                                return renderColorItem(color, label);
+                            })
+                        })
+                    }, category))
+            })
+        ]
+    });
+};
+export { CustomThemeConfig };

package/dist/components/UXThemeSwitch/index.d.ts

@@ -1,4 +1,4 @@
+import { useColorScheme, useThemeColor, useThemeStore } from '@particle-network/ui-shared';
 export * from './theme-switch';
-export * from './use-color-scheme';
 export * from './use-theme';
-export * from './use-theme-color';
+export { useColorScheme, useThemeColor, useThemeStore };

package/dist/components/UXThemeSwitch/index.js

@@ -1,4 +1,4 @@
+import { useColorScheme, useThemeColor, useThemeStore } from "@particle-network/ui-shared";
 export * from "./theme-switch.js";
-export * from "./use-color-scheme.js";
 export * from "./use-theme.js";
-export * from "./use-theme-color.js";
+export { useColorScheme, useThemeColor, useThemeStore };

package/dist/components/UXThemeSwitch/theme-item.js

@@ -1,11 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
+import { useTheme } from "./use-theme.js";
 const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
-    const lang = useLang();
+    const { lang } = useLang();
+    const { customTheme } = useTheme();
+    const customColors = customTheme.colorVariables;
     return /*#__PURE__*/ jsxs(VStack, {
         gap: 2,
         items: "center",
@@ -13,7 +16,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: cn('rounded-medium border-2 transition-all duration-300 hover:scale-105', 'h-[59px] w-[100px] md:h-[71px] md:w-[120px]', isSelected ? 'border-primary' : 'border-transparent'),
+                className: cn('rounded-medium border-2 border-transparent transition-all duration-300 hover:scale-105', 'h-[59px] w-[100px] md:h-[71px] md:w-[120px]', isSelected && 'border-primary'),
+                style: {
+                    borderColor: isSelected && 'custom' === id ? customColors.primary : void 0
+                },
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
                     viewBox: "0 0 120 71",
@@ -27,7 +33,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "67",
                             rx: "5",
                             fill: "currentColor",
-                            className: "text-primary"
+                            className: "text-primary",
+                            style: {
+                                color: 'custom' === id ? customColors.primary : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("mask", {
                             id: "mask0_40928_218196",
@@ -46,7 +55,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 height: "67",
                                 rx: "5",
                                 fill: "currentColor",
-                                className: "text-background"
+                                className: "text-background",
+                                style: {
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
+                                }
                             })
                         }),
                         /*#__PURE__*/ jsx("g", {
@@ -58,7 +70,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 height: "67",
                                 rx: "6",
                                 fill: "currentColor",
-                                className: "text-background"
+                                className: "text-background",
+                                style: {
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
+                                }
                             })
                         }),
                         /*#__PURE__*/ jsx("rect", {
@@ -67,7 +82,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             width: "100",
                             height: "1",
                             fill: "currentColor",
-                            className: "text-divider"
+                            className: "text-divider",
+                            style: {
+                                color: 'custom' === id ? customColors.divider : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -76,7 +94,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-foreground"
+                            className: "text-foreground",
+                            style: {
+                                color: 'custom' === id ? customColors.foreground : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -85,7 +106,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-bullish"
+                            className: "text-bullish",
+                            style: {
+                                color: 'custom' === id ? customColors.bullish : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "75.8994",
@@ -94,7 +118,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-bearish"
+                            className: "text-bearish",
+                            style: {
+                                color: 'custom' === id ? customColors.bearish : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "86.4316",
@@ -103,7 +130,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-secondary"
+                            className: "text-secondary",
+                            style: {
+                                color: 'custom' === id ? customColors.secondary : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "94.707",
@@ -112,7 +142,10 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-secondary"
+                            className: "text-secondary",
+                            style: {
+                                color: 'custom' === id ? customColors.secondary : void 0
+                            }
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "102.981",
@@ -121,9 +154,54 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                             height: "6.01835",
                             rx: "3.00917",
                             fill: "currentColor",
-                            className: "text-secondary"
+                            className: "text-secondary",
+                            style: {
+                                color: 'custom' === id ? customColors.secondary : void 0
+                            }
                         }),
-                        /*#__PURE__*/ jsx("rect", {
+                        'custom' === id ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx("g", {
+                                    clipPath: "url(#paint0_angular_48986_280686_clip_path)",
+                                    children: /*#__PURE__*/ jsx("g", {
+                                        transform: "matrix(0 0.011 -0.011 0 39 51)",
+                                        children: /*#__PURE__*/ jsx("foreignObject", {
+                                            x: "-1043.94",
+                                            y: "-1043.94",
+                                            width: "2087.87",
+                                            height: "2087.87",
+                                            children: /*#__PURE__*/ jsx("div", {
+                                                style: {
+                                                    background: 'conic-gradient(from 90deg,rgba(255, 0, 0, 1) 0deg,rgba(255, 133, 0, 1) 54deg,rgba(190, 255, 0, 1) 117deg,rgba(7, 225, 255, 1) 199.8deg,rgba(35, 0, 255, 1) 282.6deg,rgba(173, 0, 255, 1) 360deg)',
+                                                    height: '100%',
+                                                    width: '100%',
+                                                    opacity: 1
+                                                }
+                                            })
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx("circle", {
+                                    cx: "39",
+                                    cy: "51",
+                                    r: "10.7583",
+                                    "data-figma-gradient-fill": '{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1.0,"g":0.0,"b":0.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":0.52295231819152832,"b":0.0,"a":1.0},"position":0.15000000596046448},{"color":{"r":0.74555355310440063,"g":1.0,"b":0.0,"a":1.0},"position":0.32499998807907104},{"color":{"r":0.029410807415843010,"g":0.88352936506271362,"b":1.0,"a":1.0},"position":0.55500000715255737},{"color":{"r":0.14000000059604645,"g":0.0,"b":1.0,"a":1.0},"position":0.78500002622604370},{"color":{"r":0.67999994754791260,"g":0.0,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":1.0,"g":0.0,"b":0.0,"a":1.0},"position":0.0},{"color":{"r":1.0,"g":0.52295231819152832,"b":0.0,"a":1.0},"position":0.15000000596046448},{"color":{"r":0.74555355310440063,"g":1.0,"b":0.0,"a":1.0},"position":0.32499998807907104},{"color":{"r":0.029410807415843010,"g":0.88352936506271362,"b":1.0,"a":1.0},"position":0.55500000715255737},{"color":{"r":0.14000000059604645,"g":0.0,"b":1.0,"a":1.0},"position":0.78500002622604370},{"color":{"r":0.67999994754791260,"g":0.0,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.3471115643134642e-15,"m01":-22.0,"m02":50.0,"m10":22.0,"m11":1.3471115643134642e-15,"m12":40.0},"opacity":1.0,"blendMode":"NORMAL","visible":true}',
+                                    stroke: "#8B8EA1",
+                                    strokeWidth: "0.483303"
+                                }),
+                                /*#__PURE__*/ jsx("defs", {
+                                    children: /*#__PURE__*/ jsx("clipPath", {
+                                        id: "paint0_angular_48986_280686_clip_path",
+                                        children: /*#__PURE__*/ jsx("circle", {
+                                            cx: "39",
+                                            cy: "51",
+                                            r: "10.7583",
+                                            strokeWidth: "0.483303"
+                                        })
+                                    })
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsx("rect", {
                             x: "27",
                             y: "39",
                             width: "22.5688",

package/dist/components/UXThemeSwitch/theme-switch.d.ts

@@ -4,9 +4,16 @@ import { type UXModalProps } from '../UXModal';
 export interface UXThemeSwitchModalProps extends Pick<UXModalProps, 'isOpen' | 'onClose' | 'onOpenChange' | 'backdrop'> {
     as?: 'modal' | 'drawer';
     omitThemes?: ThemeId[];
+    /**
+     * 颜色改变模式
+     * - drag: 拖动时改变颜色
+     * - dragEnd: 拖动停止时改变颜色
+     * @default dragEnd
+     */
+    colorChangeMode?: 'drag' | 'dragEnd';
 }
 export declare const UXThemeSwitchModal: React.FC<UXThemeSwitchModalProps>;
-export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop'> {
+export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop' | 'colorChangeMode'> {
     children?: (onOpen: () => void) => React.ReactNode;
 }
 export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { cn } from "@heroui/theme";
+import { useEffect, useMemo, useState } from "react";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
 import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";
@@ -15,6 +15,7 @@ import { UXInput } from "../UXInput/index.js";
 import { UXModal } from "../UXModal/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
+import { CustomThemeConfig } from "./custom-theme-config.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
 const FONT_EXAMPLES = [
@@ -31,14 +32,20 @@ const FONT_EXAMPLES = [
         url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
     }
 ];
-const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange })=>{
+const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange, colorChangeMode })=>{
     const i18n = useI18n();
-    const { theme: selectedTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
+    const { theme: selectedTheme, customTheme: savedCustomTheme, setTheme, initTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
+    useEffect(()=>{
+        initTheme();
+    }, []);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes
     ]);
+    const handleThemeSelect = (theme)=>{
+        'custom' === theme.id ? setTheme(savedCustomTheme) : setTheme(theme);
+    };
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
         classNames: {
@@ -61,10 +68,18 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
                     className: "grid grid-cols-3 gap-y-5 pt-1",
                     children: themes.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
                             isSelected: selectedTheme.id === theme.id,
-                            onClick: ()=>setTheme(theme),
+                            onClick: ()=>handleThemeSelect(theme),
                             ...theme
                         }, theme.id))
                 }),
+                'custom' === selectedTheme.id && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(UXDivider, {}),
+                        /*#__PURE__*/ jsx(CustomThemeConfig, {
+                            colorChangeMode: colorChangeMode
+                        })
+                    ]
+                }),
                 /*#__PURE__*/ jsx(UXDivider, {}),
                 /*#__PURE__*/ jsxs(VStack, {
                     gap: "md",

package/dist/components/UXThemeSwitch/use-theme.d.ts

@@ -4,10 +4,13 @@ import { type ThemeItemType } from '@particle-network/ui-shared';
  */
 export declare const useTheme: () => {
     theme: ThemeItemType;
+    customTheme: ThemeItemType;
     setTheme: (theme: ThemeItemType) => void;
+    initTheme: () => void;
+    setCustomTheme: (customTheme: ThemeItemType) => void;
     fontUrl: string;
     setFontUrl: (link: string) => void;
     clearFontUrl: () => void;
-    fontLoadStatus: import("./use-theme-store").FontLoadStatus;
+    fontLoadStatus: import("@particle-network/ui-shared").FontLoadStatus;
     fontName: string;
 };

package/dist/components/UXThemeSwitch/use-theme.js

@@ -1,65 +1,14 @@
-import { useEffect } from "react";
-import { themeKeys } from "@particle-network/ui-shared";
+import { useThemeStore } from "@particle-network/ui-shared";
 import { useDebounceFn } from "ahooks";
-import { useThemeStore } from "./use-theme-store.js";
-const DEFAULT_FONT_FAMILY = 'Inter,system-ui,sans-serif,"Microsoft YaHei"';
-const PRELOAD_FONTS_URL = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap';
-const preloadFonts = ()=>{
-    if ('undefined' == typeof window) return;
-    const existingLink = document.getElementById('ux-preload-fonts-link');
-    if (existingLink) return;
-    const linkElement = document.createElement('link');
-    linkElement.id = 'ux-preload-fonts-link';
-    linkElement.rel = 'stylesheet';
-    linkElement.href = PRELOAD_FONTS_URL;
-    document.head.appendChild(linkElement);
-};
-const applyTheme = (theme)=>{
-    if ('undefined' == typeof window) return;
-    const root = document.documentElement;
-    const isClassListCorrect = root.classList.contains(theme.id);
-    const isDataThemeCorrect = root.getAttribute('data-theme') === theme.colorScheme;
-    const isDataPrefersColorCorrect = root.getAttribute('data-prefers-color') === theme.colorScheme;
-    if (isClassListCorrect && isDataThemeCorrect && isDataPrefersColorCorrect) return;
-    if (!isDataThemeCorrect) root.setAttribute('data-theme', theme.colorScheme);
-    if (!isDataPrefersColorCorrect) root.setAttribute('data-prefers-color', theme.colorScheme);
-    root.classList.remove('dark');
-    root.classList.remove('light');
-    if (!isClassListCorrect) {
-        themeKeys.forEach((key)=>{
-            root.classList.remove(key);
-        });
-        root.classList.add(theme.id);
-    }
-};
-const extractFontFamilyFromLink = (link)=>{
-    if (!link) return null;
-    try {
-        const url = new URL(link);
-        const familyParam = url.searchParams.get('family');
-        if (!familyParam) return null;
-        const firstFamily = familyParam.split('&family=')[0].split(':')[0].replace(/\+/g, ' ');
-        return firstFamily;
-    } catch  {
-        return null;
-    }
-};
-const applyFont = (fontName)=>{
-    if ('undefined' == typeof window) return;
-    if (fontName) {
-        document.documentElement.style.setProperty('--ux-font-family', `"${fontName}", ${DEFAULT_FONT_FAMILY}`);
-        document.body.style.fontFamily = `"${fontName}", ${DEFAULT_FONT_FAMILY}`;
-    } else {
-        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
-        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
-    }
-};
+import { applyFont, applyTheme, extractFontFamilyFromLink, preloadFonts } from "./utils.js";
 const useTheme = ()=>{
     const theme = useThemeStore((state)=>state.theme);
+    const customTheme = useThemeStore((state)=>state.customTheme);
     const fontUrl = useThemeStore((state)=>state.fontUrl);
     const fontName = useThemeStore((state)=>state.fontName);
     const fontLoadStatus = useThemeStore((state)=>state.fontLoadStatus);
     const storeSetTheme = useThemeStore((state)=>state.setTheme);
+    const storeSetCustomTheme = useThemeStore((state)=>state.setCustomTheme);
     const storeSetFontUrl = useThemeStore((state)=>state.setFontUrl);
     const storeSetFontLoadStatus = useThemeStore((state)=>state.setFontLoadStatus);
     const storeSetFontName = useThemeStore((state)=>state.setFontName);
@@ -92,11 +41,11 @@ const useTheme = ()=>{
     const { run: debouncedApplyFont } = useDebounceFn((customFontLink, themeFontName)=>applyFontWithStatus(customFontLink, themeFontName), {
         wait: 300
     });
-    useEffect(()=>{
+    const initTheme = ()=>{
         preloadFonts();
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
-    }, []);
+    };
     const setTheme = (theme)=>{
         storeSetTheme(theme);
         applyTheme(theme);
@@ -114,7 +63,10 @@ const useTheme = ()=>{
     };
     return {
         theme,
+        customTheme,
         setTheme,
+        initTheme,
+        setCustomTheme: storeSetCustomTheme,
         fontUrl,
         setFontUrl,
         clearFontUrl,