diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
index 1003220e7..0b015ba68 100644
--- a/ui/src/components/Header/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -81,10 +81,11 @@ const Header: FC = () => {
     setShowMobileSideNav(false);
   }, [location.pathname]);
 
-  let navbarStyle = 'theme-colored';
+  let navbarStyle = 'theme-light';
   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}`;
@@ -185,8 +186,8 @@ const Header: FC = () => {
           <>
             <Link
               className={classnames('me-2 btn btn-link', {
-                'link-light': navbarStyle === 'theme-colored',
-                'link-primary': navbarStyle !== 'theme-colored',
+                'link-light': navbarStyle === 'theme-dark',
+                'link-primary': navbarStyle !== 'theme-dark',
               })}
               onClick={() => floppyNavigation.storageLoginRedirect()}
               to={userCenter.getLoginUrl()}>
@@ -196,7 +197,7 @@ const Header: FC = () => {
               <Link
                 className={classnames(
                   'btn',
-                  navbarStyle === 'theme-colored' ? 'btn-light' : 'btn-primary',
+                  navbarStyle === 'theme-dark' ? 'btn-light' : 'btn-primary',
                 )}
                 to={userCenter.getSignUpUrl()}>
                 {t('btns.signup')}
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,