diff --git a/src/AreaChart/index.tsx b/src/AreaChart/index.tsx
index 5e78b85..fecca28 100644
--- a/src/AreaChart/index.tsx
+++ b/src/AreaChart/index.tsx
@@ -26,7 +26,7 @@ import CustomYAxisTick from '@/common/CustomYAxisTick';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 import { getMaxLabelLength } from '@/utils/getMaxLabelLength';
 
diff --git a/src/BarList/index.tsx b/src/BarList/index.tsx
index f564c0c..8245c57 100644
--- a/src/BarList/index.tsx
+++ b/src/BarList/index.tsx
@@ -6,7 +6,7 @@ import React, { HTMLAttributes, ReactNode, forwardRef, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 
 import { useStyles } from './styles';
diff --git a/src/DataBars/CategoryBar.tsx b/src/DataBars/CategoryBar.tsx
index 636884a..f4ba487 100644
--- a/src/DataBars/CategoryBar.tsx
+++ b/src/DataBars/CategoryBar.tsx
@@ -5,7 +5,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter, sumNumericArray } from '@/utils';
 
 import { useStyles } from './styles';
diff --git a/src/DataBars/DeltaBar.tsx b/src/DataBars/DeltaBar.tsx
index b1c1498..4b26ac1 100644
--- a/src/DataBars/DeltaBar.tsx
+++ b/src/DataBars/DeltaBar.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '@lobehub/ui';
 import { ReactNode, forwardRef } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-import { DeltaTypes } from '@/types';
+import { DeltaTypes } from '@/types/charts';
 import { mapInputsToDeltaType } from '@/utils';
 
 import { useStyles } from './styles';
diff --git a/src/DonutChart/DonutChartTooltip.tsx b/src/DonutChart/DonutChartTooltip.tsx
index 20205e9..10d8d14 100644
--- a/src/DonutChart/DonutChartTooltip.tsx
+++ b/src/DonutChart/DonutChartTooltip.tsx
@@ -3,7 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import ChartTooltipFrame from '@/common/ChartTooltip/ChartTooltipFrame';
 import ChartTooltipRow from '@/common/ChartTooltip/ChartTooltipRow';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 export interface DonutChartTooltipProps {
   active: boolean | undefined;
diff --git a/src/DonutChart/index.tsx b/src/DonutChart/index.tsx
index eb3b068..14101e0 100644
--- a/src/DonutChart/index.tsx
+++ b/src/DonutChart/index.tsx
@@ -10,8 +10,8 @@ import type BaseAnimationTimingProps from '@/common/BaseAnimationTimingProps';
 import { CustomTooltipProps } from '@/common/CustomTooltipProps';
 import NoData, { type NoDataProps } from '@/common/NoData';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import type { EventProps } from '@/types';
-import { ValueFormatter } from '@/types';
+import type { EventProps } from '@/types/charts';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter, isOnSeverSide } from '@/utils';
 
 import { DonutChartTooltip } from './DonutChartTooltip';
diff --git a/src/DonutChart/inputParser.ts b/src/DonutChart/inputParser.ts
index 59c05b0..51c5015 100644
--- a/src/DonutChart/inputParser.ts
+++ b/src/DonutChart/inputParser.ts
@@ -1,4 +1,4 @@
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { sumNumericArray } from '@/utils';
 
 const calculateDefaultLabel = (data: any[], category: string) =>
diff --git a/src/Heatmaps/Calendar.tsx b/src/Heatmaps/Calendar.tsx
index 8a4d9ab..af95f83 100644
--- a/src/Heatmaps/Calendar.tsx
+++ b/src/Heatmaps/Calendar.tsx
@@ -2,7 +2,7 @@ import { Tooltip } from '@lobehub/ui';
 import { keyframes } from 'antd-style';
 import { Fragment, ReactNode, memo } from 'react';
 
-import type { Activity, Labels, Week } from '@/types';
+import type { Activity, Labels, Week } from '@/types/charts';
 
 interface CalendarProps {
   blockMargin: number;
diff --git a/src/Heatmaps/ChartLabels.tsx b/src/Heatmaps/ChartLabels.tsx
index ea8099e..9f85525 100644
--- a/src/Heatmaps/ChartLabels.tsx
+++ b/src/Heatmaps/ChartLabels.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import type { Labels, Week } from '@/types';
+import type { Labels, Week } from '@/types/charts';
 import { getMonthLabels } from '@/utils/calendar';
 
 import { useStyles } from './styles';
diff --git a/src/Heatmaps/index.tsx b/src/Heatmaps/index.tsx
index dcf4533..307f852 100644
--- a/src/Heatmaps/index.tsx
+++ b/src/Heatmaps/index.tsx
@@ -8,7 +8,7 @@ import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import NoData, { NoDataProps } from '@/common/NoData';
 import { usePrefersReducedMotion } from '@/hooks/usePrefersReducedMotion';
-import type { Activity, Labels, Week } from '@/types';
+import type { Activity, Labels, Week } from '@/types/charts';
 import { isOnSeverSide } from '@/utils';
 import {
   DEFAULT_LABELS,
diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
index e68030c..3e7c4e8 100644
--- a/src/LineChart/index.tsx
+++ b/src/LineChart/index.tsx
@@ -25,7 +25,7 @@ import CustomYAxisTick from '@/common/CustomYAxisTick';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 import { getMaxLabelLength } from '@/utils/getMaxLabelLength';
 
diff --git a/src/ScatterChart/ScatterChartTooltip.tsx b/src/ScatterChart/ScatterChartTooltip.tsx
index 2e32b19..2d4193b 100644
--- a/src/ScatterChart/ScatterChartTooltip.tsx
+++ b/src/ScatterChart/ScatterChartTooltip.tsx
@@ -6,7 +6,7 @@ import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { ChartTooltipFrame } from '@/common/ChartTooltip/ChartTooltipFrame';
-import { ScatterChartValueFormatter } from '@/types';
+import { ScatterChartValueFormatter } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 
 import ScatterChartTooltipRow from './ScatterChartTooltipRow';
diff --git a/src/ScatterChart/index.tsx b/src/ScatterChart/index.tsx
index facb496..e5fb12b 100644
--- a/src/ScatterChart/index.tsx
+++ b/src/ScatterChart/index.tsx
@@ -29,8 +29,8 @@ import {
   getYAxisDomain,
 } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import type { EventProps } from '@/types';
-import { IntervalType, ValueFormatter } from '@/types';
+import type { EventProps } from '@/types/charts';
+import { IntervalType, ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter } from '@/utils';
 import { getMaxLabelLength } from '@/utils/getMaxLabelLength';
 
diff --git a/src/SparkChart/SparkAreaChart.tsx b/src/SparkChart/SparkAreaChart.tsx
index 1746783..c23d14a 100644
--- a/src/SparkChart/SparkAreaChart.tsx
+++ b/src/SparkChart/SparkAreaChart.tsx
@@ -12,7 +12,7 @@ import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 
 export interface SparkAreaChartProps extends BaseSparkChartProps {
   connectNulls?: boolean;
diff --git a/src/SparkChart/SparkLineChart.tsx b/src/SparkChart/SparkLineChart.tsx
index 1c91e03..c2c288e 100644
--- a/src/SparkChart/SparkLineChart.tsx
+++ b/src/SparkChart/SparkLineChart.tsx
@@ -12,7 +12,7 @@ import BaseSparkChartProps from '@/common/BaseSparkChartProps';
 import NoData from '@/common/NoData';
 import { constructCategoryColors, getYAxisDomain } from '@/common/utils';
 import { useThemeColorRange } from '@/hooks/useThemeColorRange';
-import { CurveType } from '@/types';
+import { CurveType } from '@/types/charts';
 
 export interface SparkLineChartProps extends BaseSparkChartProps {
   connectNulls?: boolean;
diff --git a/src/common/BaseChartProps.tsx b/src/common/BaseChartProps.tsx
index 6f6f06e..714eb89 100644
--- a/src/common/BaseChartProps.tsx
+++ b/src/common/BaseChartProps.tsx
@@ -1,7 +1,7 @@
 import { ComponentType, HTMLAttributes } from 'react';
 
 import type { NoDataProps } from '@/common/NoData';
-import { IntervalType, LabelFormatter, ValueFormatter } from '@/types';
+import { IntervalType, LabelFormatter, ValueFormatter } from '@/types/charts';
 
 import type BaseAnimationTimingProps from './BaseAnimationTimingProps';
 import { CustomTooltipProps } from './CustomTooltipProps';
diff --git a/src/common/ChartTooltip/index.tsx b/src/common/ChartTooltip/index.tsx
index fc09b1b..0b0cfac 100644
--- a/src/common/ChartTooltip/index.tsx
+++ b/src/common/ChartTooltip/index.tsx
@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 import ChartTooltipFrame from './ChartTooltipFrame';
 import ChartTooltipRow from './ChartTooltipRow';
diff --git a/src/common/CustomTooltipProps.tsx b/src/common/CustomTooltipProps.tsx
index 37bcf9a..89b05ab 100644
--- a/src/common/CustomTooltipProps.tsx
+++ b/src/common/CustomTooltipProps.tsx
@@ -1,7 +1,7 @@
 import { NameType, Payload } from 'recharts/types/component/DefaultTooltipContent';
 
 import { ScatterChartValueFormatter } from '@/ScatterChart';
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 export type CustomTooltipProps = {
   active: boolean | undefined;
diff --git a/src/common/CustomYAxisTick.tsx b/src/common/CustomYAxisTick.tsx
index 53362f8..47ed6c6 100644
--- a/src/common/CustomYAxisTick.tsx
+++ b/src/common/CustomYAxisTick.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from 'antd-style';
 import React, { memo } from 'react';
 
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 
 interface CustomYAxisTickProps {
   align: 'left' | 'right';
diff --git a/src/hooks/useThemeColorRange.ts b/src/hooks/useThemeColorRange.ts
index ac7b5d2..05e8f2b 100644
--- a/src/hooks/useThemeColorRange.ts
+++ b/src/hooks/useThemeColorRange.ts
@@ -1,20 +1,28 @@
 import { useTheme } from 'antd-style';
+import { useMemo } from 'react';
 
 export const useThemeColorRange = () => {
   const theme = useTheme();
 
-  return [
-    theme.geekblue,
-    theme.gold,
-    theme.lime,
-    theme.volcano,
-    theme.purple,
-    theme.blue,
-    theme.orange,
-    theme.green,
-    theme.red,
-    theme.cyan,
-    theme.yellow,
-    theme.magenta,
-  ];
+  return useMemo(
+    () => [
+      theme.geekblue,
+      theme.gold,
+      theme.green,
+      theme.cyan,
+      theme.purple,
+      theme.red,
+      theme.volcano,
+      theme.gray,
+      theme.geekblue7,
+      theme.gold7,
+      theme.green7,
+      theme.cyan7,
+      theme.purple7,
+      theme.red7,
+      theme.volcano7,
+      theme.gray7,
+    ],
+    [theme],
+  );
 };
diff --git a/src/index.ts b/src/index.ts
index aee4cc9..1191d6a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,5 +13,5 @@ export { default as LineChart, type LineChartProps } from './LineChart';
 export { default as ScatterChart, type ScatterChartProps } from './ScatterChart';
 export * from './SparkChart';
 export { default as Tracker, type TrackerProps } from './Tracker';
-export type * from './types';
+export type * from './types/charts';
 export { useThemeColorRange } from '@/hooks/useThemeColorRange';
diff --git a/src/types.ts b/src/types/charts.ts
similarity index 100%
rename from src/types.ts
rename to src/types/charts.ts
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000..3a5fd43
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,9 @@
+import type { LobeCustomStylish, LobeCustomToken } from '@lobehub/ui';
+import 'antd-style';
+
+declare module 'antd-style' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface CustomToken extends LobeCustomToken {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface CustomStylish extends LobeCustomStylish {}
+}
diff --git a/src/utils/calendar.ts b/src/utils/calendar.ts
index 42dde73..e3a8207 100644
--- a/src/utils/calendar.ts
+++ b/src/utils/calendar.ts
@@ -12,7 +12,7 @@ import {
   subWeeks,
 } from 'date-fns';
 
-import type { Activity, Week } from '@/types';
+import type { Activity, Week } from '@/types/charts';
 import { isOnSeverSide } from '@/utils/index';
 
 export const DEFAULT_MONTH_LABELS = [
diff --git a/src/utils/getMaxLabelLength.ts b/src/utils/getMaxLabelLength.ts
index ffece98..fa952dd 100644
--- a/src/utils/getMaxLabelLength.ts
+++ b/src/utils/getMaxLabelLength.ts
@@ -1,4 +1,4 @@
-import { ValueFormatter } from '@/types';
+import { ValueFormatter } from '@/types/charts';
 import { defaultValueFormatter, isOnSeverSide } from '@/utils/index';
 
 export const getTextWidth = (text: string) => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 5eaf438..a4275b2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { DeltaTypes, ValueFormatter } from '@/types';
+import { DeltaTypes, ValueFormatter } from '@/types/charts';
 
 export const defaultValueFormatter: ValueFormatter = String;