diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index b94f7377c..12602738d 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -1,4 +1,4 @@
-import { ConnectorDTO, ConnectorType } from '@logto/schemas';
+import { AppearanceMode, ConnectorDTO, ConnectorType } from '@logto/schemas';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
@@ -21,6 +21,7 @@ import TabNav, { TabNavItem } from '@/components/TabNav';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import useApi, { RequestError } from '@/hooks/use-api';
 import useConnectorInUse from '@/hooks/use-connector-in-use';
+import { useTheme } from '@/hooks/use-theme';
 import Back from '@/icons/Back';
 import Delete from '@/icons/Delete';
 import More from '@/icons/More';
@@ -48,6 +49,7 @@ const ConnectorDetails = () => {
   const isLoading = !data && !error;
   const api = useApi();
   const navigate = useNavigate();
+  const theme = useTheme();
 
   useEffect(() => {
     if (data) {
@@ -120,7 +122,10 @@ const ConnectorDetails = () => {
       {data && (
         <Card className={styles.header}>
           <div className={styles.logoContainer}>
-            <img src={data.logo} className={styles.logo} />
+            <img
+              src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
+              className={styles.logo}
+            />
           </div>
           <div className={styles.metadata}>
             <div>
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
index 26646d6d0..5b92630e4 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
@@ -1,4 +1,4 @@
-import { ConnectorDTO, ConnectorType } from '@logto/schemas';
+import { AppearanceMode, ConnectorDTO, ConnectorType } from '@logto/schemas';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -7,6 +7,7 @@ import Button from '@/components/Button';
 import ItemPreview from '@/components/ItemPreview';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import { connectorPlatformLabel, connectorTitlePlaceHolder } from '@/consts/connectors';
+import { useTheme } from '@/hooks/use-theme';
 import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
 
 import ConnectorPlaceholderIcon from '../ConnectorPlaceholderIcon';
@@ -22,6 +23,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
   const { t } = useTranslation(undefined);
   const enabledConnectors = connectors.filter(({ enabled }) => enabled);
   const connector = enabledConnectors[0];
+  const theme = useTheme();
 
   if (!connector) {
     return (
@@ -67,7 +69,14 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
         }
         icon={
           <div className={styles.logoContainer}>
-            <img className={styles.logo} src={connector.logo} />
+            <img
+              className={styles.logo}
+              src={
+                theme === AppearanceMode.DarkMode && connector.logoDark
+                  ? connector.logoDark
+                  : connector.logo
+              }
+            />
           </div>
         }
       />