diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
index 1003220e7..bd2296b4c 100644
--- a/ui/src/components/Header/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -85,6 +85,7 @@ const Header: FC = () => {
   let themeMode = 'light';
   const { theme, theme_config } = themeSettingStore((_) => _);
   if (theme_config?.[theme]?.navbar_style) {
+    // const color = theme_config[theme].navbar_style.startsWith('#')
     themeMode = isLight(theme_config[theme].navbar_style) ? 'light' : 'dark';
     console.log('isLightTheme', themeMode);
     navbarStyle = `theme-${themeMode}`;
diff --git a/ui/src/pages/Admin/Themes/index.tsx b/ui/src/pages/Admin/Themes/index.tsx
index 63a490555..94eccbca1 100644
--- a/ui/src/pages/Admin/Themes/index.tsx
+++ b/ui/src/pages/Admin/Themes/index.tsx
@@ -166,7 +166,9 @@ const Index: FC = () => {
         const themeConfig = setting.theme_config[themeName];
         const formMeta = { ...formData };
         formMeta.themes.value = themeName;
-        formMeta.navbar_style.value = themeConfig?.navbar_style;
+        formMeta.navbar_style.value = themeConfig?.navbar_style.startsWith('#')
+          ? themeConfig?.navbar_style
+          : DEFAULT_THEME_COLOR;
         formMeta.primary_color.value = themeConfig?.primary_color;
         formData.color_scheme.value = setting?.color_scheme || 'system';
         setFormData({ ...formMeta });
diff --git a/ui/src/stores/themeSetting.ts b/ui/src/stores/themeSetting.ts
index 9f6802b86..4b13d818f 100644
--- a/ui/src/stores/themeSetting.ts
+++ b/ui/src/stores/themeSetting.ts
@@ -42,6 +42,10 @@ const store = create<IType>((set) => ({
   },
   update: (params) =>
     set((state) => {
+      // Compatibility default value is colored or light before v1.5.1
+      if (!params.theme_config.default.navbar_style.startsWith('#')) {
+        params.theme_config.default.navbar_style = DEFAULT_THEME_COLOR;
+      }
       return {
         ...state,
         ...params,