diff --git a/ui/src/common/constants.ts b/ui/src/common/constants.ts
index d52f2b877..303926fbf 100644
--- a/ui/src/common/constants.ts
+++ b/ui/src/common/constants.ts
@@ -650,3 +650,5 @@ export const SYSTEM_AVATAR_OPTIONS = [
 ];
 
 export const TAG_SLUG_NAME_MAX_LENGTH = 35;
+
+export const DEFAULT_THEME_COLOR = '#0033ff';
diff --git a/ui/src/components/CustomizeTheme/index.tsx b/ui/src/components/CustomizeTheme/index.tsx
index ff49e5507..b142540b2 100644
--- a/ui/src/components/CustomizeTheme/index.tsx
+++ b/ui/src/components/CustomizeTheme/index.tsx
@@ -24,6 +24,7 @@ import Color from 'color';
 
 import { shiftColor, tintColor, shadeColor } from '@/utils';
 import { themeSettingStore } from '@/stores';
+import { DEFAULT_THEME_COLOR } from '@/common/constants';
 
 const Index: FC = () => {
   const { theme, theme_config } = themeSettingStore((_) => _);
@@ -34,7 +35,9 @@ const Index: FC = () => {
   const setThemeColor = () => {
     const themeMetaNode = document.querySelector('meta[name="theme-color"]');
     if (themeMetaNode) {
-      const themeColor = primaryColor ? primaryColor.hex() : '#0033ff';
+      const themeColor = primaryColor
+        ? primaryColor.hex()
+        : DEFAULT_THEME_COLOR;
       themeMetaNode.setAttribute('content', themeColor);
     }
   };
diff --git a/ui/src/pages/Admin/Themes/index.tsx b/ui/src/pages/Admin/Themes/index.tsx
index 0d2198166..b5dc2ebd5 100644
--- a/ui/src/pages/Admin/Themes/index.tsx
+++ b/ui/src/pages/Admin/Themes/index.tsx
@@ -27,6 +27,7 @@ import { useToast } from '@/hooks';
 import { handleFormError, scrollToElementTop } from '@/utils';
 import { themeSettingStore } from '@/stores';
 import { setupAppTheme } from '@/utils/localize';
+import { DEFAULT_THEME_COLOR } from '@/common/constants';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', {
@@ -67,7 +68,7 @@ const Index: FC = () => {
         type: 'string',
         title: t('primary_color.label'),
         description: t('primary_color.text'),
-        default: '#0033FF',
+        default: DEFAULT_THEME_COLOR,
       },
     },
   };
@@ -103,7 +104,7 @@ const Index: FC = () => {
 
   const resetPrimaryScheme = () => {
     const formMeta = { ...formData };
-    formMeta.primary_color.value = '#0033FF';
+    formMeta.primary_color.value = DEFAULT_THEME_COLOR;
     setFormData({ ...formMeta });
   };
 
diff --git a/ui/src/stores/themeSetting.ts b/ui/src/stores/themeSetting.ts
index d0788cc81..dde9c91e3 100644
--- a/ui/src/stores/themeSetting.ts
+++ b/ui/src/stores/themeSetting.ts
@@ -20,6 +20,7 @@
 import create from 'zustand';
 
 import { AdminSettingsTheme } from '@/common/interface';
+import { DEFAULT_THEME_COLOR } from '@/common/constants';
 
 interface IType {
   theme: AdminSettingsTheme['theme'];
@@ -36,7 +37,7 @@ const store = create<IType>((set) => ({
   theme_config: {
     default: {
       navbar_style: 'colored',
-      primary_color: '#0033FF',
+      primary_color: DEFAULT_THEME_COLOR,
     },
   },
   update: (params) =>