feat(v2): themed logo in footer (#3993)

* feat: attempt 1 at themedlogo in footer

* Add srcDark to website for temp debug

* typo fix

* Got it now! except for centering

* style: centered new themed image logo

* style: change ThemedImage styleing to center footer logo

* style: Change ThemeImage Style to initial

This was my mistake.

Removed temp `srcDark` footer logo

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>
             )}

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;
 }

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(),

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;