diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.module.scss
index 479737939..b327db081 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.module.scss
@@ -15,6 +15,11 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    .frameBackground {
+      // Static white.
+      background: #fff;
+    }
   }
 
   .logoDarkUploader {
@@ -24,6 +29,11 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
+
+    .frameDarkBackground {
+      // Static black.
+      background: #000;
+    }
   }
 }
 
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx
index 55618aaac..3d8f17f48 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx
@@ -12,7 +12,11 @@ import * as styles from './index.module.scss';
 
 const allowedMimeTypes: AllowedUploadMimeType[] = ['image/png', 'image/jpeg', 'image/svg+xml']; // Only allow `svg`, `png`, `jpg` and `jpeg` files.
 
-function LogosUploader() {
+type Props = {
+  isDarkModeEnabled: boolean;
+};
+
+function LogosUploader({ isDarkModeEnabled }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [uploadLogoError, setUploadLogoError] = useState<string>();
   const [uploadDarkLogoError, setUploadDarkLogoError] = useState<string>();
@@ -29,9 +33,16 @@ function LogosUploader() {
             render={({ field: { onChange, value, name } }) => (
               <ImageUploader
                 name={name}
-                className={styles.frame}
+                className={classNames(
+                  isDarkModeEnabled && styles.frame,
+                  isDarkModeEnabled && value && styles.frameBackground
+                )}
                 value={value ?? ''}
-                actionDescription={t('enterprise_sso_details.branding_logo_context')}
+                actionDescription={t(
+                  isDarkModeEnabled
+                    ? 'enterprise_sso_details.branding_light_logo_context'
+                    : 'enterprise_sso_details.branding_logo_context'
+                )}
                 allowedMimeTypes={allowedMimeTypes}
                 onCompleted={onChange}
                 onUploadErrorChange={setUploadLogoError}
@@ -42,30 +53,37 @@ function LogosUploader() {
             )}
           />
         </div>
-        <div className={styles.logoDarkUploader}>
-          <Controller
-            control={control}
-            name="branding.darkLogo"
-            render={({ field: { onChange, value, name } }) => (
-              <ImageUploader
-                name={name}
-                className={styles.frameDark}
-                value={value ?? ''}
-                actionDescription={t('enterprise_sso_details.branding_dark_logo_context')}
-                allowedMimeTypes={allowedMimeTypes}
-                onCompleted={onChange}
-                onUploadErrorChange={setUploadDarkLogoError}
-                onDelete={() => {
-                  onChange('');
-                }}
-              />
-            )}
-          />
-        </div>
+        {isDarkModeEnabled && (
+          <div className={styles.logoDarkUploader}>
+            <Controller
+              control={control}
+              name="branding.darkLogo"
+              render={({ field: { onChange, value, name } }) => (
+                <ImageUploader
+                  name={name}
+                  className={classNames(styles.frameDark, value && styles.frameDarkBackground)}
+                  value={value ?? ''}
+                  actionDescription={t('enterprise_sso_details.branding_dark_logo_context')}
+                  allowedMimeTypes={allowedMimeTypes}
+                  onCompleted={onChange}
+                  onUploadErrorChange={setUploadDarkLogoError}
+                  onDelete={() => {
+                    onChange('');
+                  }}
+                />
+              )}
+            />
+          </div>
+        )}
       </div>
       {uploadLogoError && (
         <div className={classNames(styles.description, styles.error)}>
-          {t('enterprise_sso_details.branding_logo_error', { error: uploadLogoError })}
+          {t(
+            isDarkModeEnabled
+              ? 'enterprise_sso_details.branding_light_logo_error'
+              : 'enterprise_sso_details.branding_logo_error',
+            { error: uploadLogoError }
+          )}
         </div>
       )}
       {uploadDarkLogoError && (
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Experience/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/Experience/index.tsx
index 501fe95d4..4262daee0 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Experience/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Experience/index.tsx
@@ -39,6 +39,7 @@ type Props = {
   isDeleted: boolean;
   data: DataType;
   onUpdated: (data: DataType) => void;
+  isDarkModeEnabled: boolean;
 };
 
 export type FormType = Pick<SsoConnector, 'branding' | 'connectorName'> & {
@@ -74,7 +75,7 @@ const formDataToSsoConnectorParser = (
   };
 };
 
-function Experience({ data, isDeleted, onUpdated }: Props) {
+function Experience({ data, isDeleted, onUpdated, isDarkModeEnabled }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { isReady: isUserAssetsServiceReady } = useUserAssetsService();
   const api = useApi({ hideErrorToast: true });
@@ -288,7 +289,7 @@ function Experience({ data, isDeleted, onUpdated }: Props) {
               title="enterprise_sso_details.connector_logo_field_name"
               headlineSpacing="large"
             >
-              <LogosUploader />
+              <LogosUploader isDarkModeEnabled={isDarkModeEnabled} />
             </FormField>
           ) : (
             <>
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
index 25077dd7e..a17228469 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
@@ -1,5 +1,5 @@
 import { withAppInsights } from '@logto/app-insights/react';
-import { type SsoProviderName } from '@logto/schemas';
+import { type SsoProviderName, type SignInExperience } from '@logto/schemas';
 import { pick } from '@silverhand/essentials';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
@@ -44,6 +44,8 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
   const [isReadmeOpen, setIsReadmeOpen] = useState(false);
 
   const { isLoading: isUserAssetServiceLoading } = useUserAssetsService();
+  const { data: signInExperience, isLoading: isSignInExperienceLoading } =
+    useSWR<SignInExperience>('api/sign-in-exp');
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
@@ -56,7 +58,7 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
     { keepPreviousData: true }
   );
 
-  const isLoading = isSsoConnectorLoading || isUserAssetServiceLoading;
+  const isLoading = isSsoConnectorLoading || isUserAssetServiceLoading || isSignInExperienceLoading;
 
   const api = useApi();
   const { navigate } = useTenantPathname();
@@ -64,6 +66,8 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  const isDarkModeEnabled = signInExperience?.color.isDarkModeEnabled ?? false;
+
   useEffect(() => {
     setIsDeleteAlertOpen(false);
   }, [pathname]);
@@ -167,6 +171,7 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
             <Experience
               data={ssoConnector}
               isDeleted={isDeleted}
+              isDarkModeEnabled={isDarkModeEnabled}
               onUpdated={() => {
                 void mutate();
               }}
diff --git a/packages/phrases/src/locales/de/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/de/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts
index 2ca819a1b..7458b4291 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts
@@ -24,6 +24,8 @@ const enterprise_sso_details = {
   connector_logo_field_description: 'Each image should under 500KB, SVG, PNG, JPG, JPEG only.',
   branding_logo_context: 'Upload logo',
   branding_logo_error: 'Upload logo error: {{error}}',
+  branding_light_logo_context: 'Upload light mode logo',
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
   branding_logo_field_name: 'Logo',
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
   branding_dark_logo_context: 'Upload dark mode logo',
diff --git a/packages/phrases/src/locales/es/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/es/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/it/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/it/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/enterprise-sso-details.ts
index 1d800bf94..8970565ca 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/enterprise-sso-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/enterprise-sso-details.ts
@@ -46,6 +46,10 @@ const enterprise_sso_details = {
   /** UNTRANSLATED */
   branding_logo_error: 'Upload logo error: {{error}}',
   /** UNTRANSLATED */
+  branding_light_logo_context: 'Upload light mode logo',
+  /** UNTRANSLATED */
+  branding_light_logo_error: 'Upload light mode logo error: {{error}}',
+  /** UNTRANSLATED */
   branding_logo_field_name: 'Logo',
   /** UNTRANSLATED */
   branding_logo_field_placeholder: 'https://your.domain/logo.png',