diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
index 2d2fef0e47..ec7529cdc3 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
@@ -12,6 +12,7 @@ import Link from '@docusaurus/Link';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
 
 function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
   const toUrl = useBaseUrl(to);
@@ -35,15 +36,18 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
   );
 }
 
-const FooterLogo = ({url, alt}) => (
-  <img className="footer__logo" alt={alt} src={url} />
+const FooterLogo = ({sources, alt}) => (
+  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
 );
 
 function Footer(): JSX.Element | null {
   const {footer} = useThemeConfig();
 
   const {copyright, links = [], logo = {}} = footer || {};
-  const logoUrl = useBaseUrl(logo.src);
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  };
 
   if (!footer) {
     return null;
@@ -91,7 +95,7 @@ function Footer(): JSX.Element | null {
         )}
         {(logo || copyright) && (
           <div className="footer__bottom text--center">
-            {logo && logo.src && (
+            {logo && (logo.src || logo.srcDark) && (
               <div className="margin-bottom--sm">
                 {logo.href ? (
                   <a
@@ -99,10 +103,10 @@ function Footer(): JSX.Element | null {
                     target="_blank"
                     rel="noopener noreferrer"
                     className={styles.footerLogoLink}>
-                    <FooterLogo alt={logo.alt} url={logoUrl} />
+                    <FooterLogo alt={logo.alt} sources={sources} />
                   </a>
                 ) : (
-                  <FooterLogo alt={logo.alt} url={logoUrl} />
+                  <FooterLogo alt={logo.alt} sources={sources} />
                 )}
               </div>
             )}
diff --git a/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css
index 1066a48905..4476c5e3dc 100644
--- a/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css
@@ -3,9 +3,9 @@
 }
 
 html[data-theme='light'] .themedImage--light {
-  display: block;
+  display: initial;
 }
 
 html[data-theme='dark'] .themedImage--dark {
-  display: block;
+  display: initial;
 }
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 32355d73cd..2782feef37 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -265,6 +265,7 @@ const ThemeConfigSchema = Joi.object({
     logo: Joi.object({
       alt: Joi.string().allow(''),
       src: Joi.string(),
+      srcDark: Joi.string(),
       href: Joi.string(),
     }),
     copyright: Joi.string(),
diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
index 81356601e4..52e2fddb5f 100644
--- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
+++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
@@ -46,6 +46,7 @@ export type Footer = {
   logo?: {
     alt?: string;
     src?: string;
+    srcDark?: string;
     href?: string;
   };
   copyright?: string;