diff --git a/.release/.changeset/itchy-flies-fail.md b/.release/.changeset/itchy-flies-fail.md
new file mode 100644
index 00000000..ea88d707
--- /dev/null
+++ b/.release/.changeset/itchy-flies-fail.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Fix colorMode does not follow the parameter
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
index 61f7478b..140ca611 100644
--- a/.release/.changeset/pre.json
+++ b/.release/.changeset/pre.json
@@ -10,6 +10,7 @@
     "gorgeous-maps-fly",
     "grumpy-squids-collect",
     "honest-lies-cheer",
+    "itchy-flies-fail",
     "late-swans-sparkle",
     "lovely-maps-study",
     "quick-pots-tease",
diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
index ec483cf0..7d178fef 100644
--- a/packages/canonical-bridge-widget/CHANGELOG.md
+++ b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.4-alpha.4
+
+### Patch Changes
+
+- Fix colorMode does not follow the parameter
+
 ## 0.5.4-alpha.3
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index b465b330..2db430a1 100644
--- a/packages/canonical-bridge-widget/package.json
+++ b/packages/canonical-bridge-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.5.4-alpha.3",
+  "version": "0.5.4-alpha.4",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,
diff --git a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx
index ff25475a..79554080 100644
--- a/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx
+++ b/packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useMemo } from 'react';
-import { ColorMode, IntlProvider } from '@bnb-chain/space';
+import { ColorMode, IntlProvider, theme } from '@bnb-chain/space';
 
 import { ChainType, IChainConfig, ITransferConfig } from '@/modules/aggregator/types';
 import { StoreProvider } from '@/modules/store/StoreProvider';
-import { ThemeProvider, ThemeProviderProps } from '@/core/theme/ThemeProvider';
+import { ThemeProvider } from '@/core/theme/ThemeProvider';
 import { AggregatorProvider } from '@/modules/aggregator/components/AggregatorProvider';
 import { TokenBalancesProvider } from '@/modules/aggregator/components/TokenBalancesProvider';
 import { TokenPricesProvider } from '@/modules/aggregator/components/TokenPricesProvider';
@@ -17,7 +17,12 @@ export interface ICanonicalBridgeConfig {
 
   appearance: {
     colorMode?: ColorMode;
-    theme?: ThemeProviderProps['themeConfig'];
+    theme?: {
+      dark?: any;
+      light?: any;
+      fontFamily?: string;
+      breakpoints?: Partial<typeof theme.breakpoints>;
+    };
     locale?: string;
     messages?: Record<string, string>;
     bridgeTitle?: string;
@@ -75,7 +80,7 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) {
 
       appearance: {
         bridgeTitle: 'BNB Chain Cross-Chain Bridge',
-        mode: 'dark',
+        colorMode: 'dark',
         locale: 'en',
         messages: locales.en,
         ...config.appearance,
@@ -100,10 +105,7 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) {
       <StoreProvider>
         <IntlProvider locale={value.appearance.locale!} messages={value.appearance.messages}>
           <AggregatorProvider transferConfig={transferConfig} chains={chains}>
-            <ThemeProvider
-              themeConfig={value.appearance.theme}
-              colorMode={value.appearance.colorMode}
-            >
+            <ThemeProvider>
               <TronAccountProvider>
                 <TokenBalancesProvider />
                 <TokenPricesProvider />
diff --git a/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx b/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx
index 95b70912..9de3dfa3 100644
--- a/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx
+++ b/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx
@@ -1,4 +1,4 @@
-import { ChakraProvider, theme, createLocalStorageManager, ColorMode } from '@bnb-chain/space';
+import { ChakraProvider, ColorMode, theme } from '@bnb-chain/space';
 import { useMemo } from 'react';
 import { merge } from 'lodash';
 
@@ -8,24 +8,13 @@ import { walletStyles } from '@/core/theme/walletStyles';
 import { useBridgeConfig } from '@/CanonicalBridgeProvider';
 
 export interface ThemeProviderProps {
-  colorMode?: ColorMode;
   children: React.ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  themeConfig?: {
-    dark?: any;
-    light?: any;
-    fontFamily?: string;
-    breakpoints?: Partial<typeof theme.breakpoints>;
-  };
 }
 
-export const ThemeProvider = ({
-  children,
-  colorMode = 'dark',
-  themeConfig,
-}: ThemeProviderProps) => {
-  const { appName: APP_NAME } = useBridgeConfig();
-  const colorModeManager = createLocalStorageManager(`${APP_NAME}-color-mode`);
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const { appearance } = useBridgeConfig();
+  const { theme: themeConfig, colorMode } = appearance;
+
   const customTheme = useMemo(() => {
     return {
       ...theme,
@@ -57,7 +46,13 @@ export const ThemeProvider = ({
 
   return (
     <ChakraProvider
-      colorModeManager={colorModeManager}
+      colorModeManager={{
+        type: 'localStorage',
+        get() {
+          return colorMode;
+        },
+        set() {},
+      }}
       theme={customTheme}
       toastOptions={{
         defaultOptions: {