From d9c1bf0d7743a806e9abd5e3c65747d2d46c83a8 Mon Sep 17 00:00:00 2001
From: "yongen.loong" <yongen.loong@aelf.io>
Date: Wed, 26 Jun 2024 17:17:16 +0800
Subject: [PATCH] feat: dark mode logo

---
 src/theme/Footer/Copyright/index.tsx         |  7 +++++--
 src/theme/Footer/Links/MultiColumn/index.tsx |  3 ++-
 src/theme/logo.tsx                           | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 src/theme/logo.tsx

diff --git a/src/theme/Footer/Copyright/index.tsx b/src/theme/Footer/Copyright/index.tsx
index b647db5..5da3da0 100644
--- a/src/theme/Footer/Copyright/index.tsx
+++ b/src/theme/Footer/Copyright/index.tsx
@@ -3,7 +3,8 @@ import Copyright from "@theme-original/Footer/Copyright";
 import type CopyrightType from "@theme/Footer/Copyright";
 import type { WrapperProps } from "@docusaurus/types";
 import styles from "./index.module.css";
-import socialLinks from "../../../../config/social-links.json";
+import socialLinks from "@site/config/social-links.json";
+import Logo from "@site/src/theme/logo";
 
 type Props = WrapperProps<typeof CopyrightType>;
 
@@ -12,7 +13,9 @@ export default function CopyrightWrapper(props: Props): JSX.Element {
     <>
       <div className={styles.wrap}>
         <div className={styles.copyright}>
-          <img className={styles.logo} src="/img/Logo.aelf.svg" />
+          <div className={styles.logo}>
+            <Logo />
+          </div>
           <Copyright {...props} />
         </div>
         <div className={styles.social}>
diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx
index d1804f3..5c6cc07 100644
--- a/src/theme/Footer/Links/MultiColumn/index.tsx
+++ b/src/theme/Footer/Links/MultiColumn/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import LinkItem from "@theme/Footer/LinkItem";
 import type { Props } from "@theme/Footer/Links/MultiColumn";
+import Logo from "@site/src/theme/logo";
 
 type ColumnType = Props["columns"][number];
 type ColumnItemType = ColumnType["items"][number];
@@ -39,7 +40,7 @@ export default function FooterLinksMultiColumn({
   return (
     <div className="row footer__links">
       <div className="col footer__col mobile-hidden">
-        <img src="/img/Logo.aelf.svg" />
+        <Logo />
       </div>
       {columns.map((column, i) => (
         <Column key={i} column={column} />
diff --git a/src/theme/logo.tsx b/src/theme/logo.tsx
new file mode 100644
index 0000000..edb0730
--- /dev/null
+++ b/src/theme/logo.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+/**
+ * Reference: https://docusaurus.io/docs/markdown-features/assets#themed-images
+ */
+export default function Logo(): JSX.Element {
+  return (
+    <ThemedImage
+      alt="aelf"
+      sources={{
+        light: useBaseUrl("/img/Logo.aelf.svg"),
+        dark: useBaseUrl("/img/Logo.aelf.white.svg"),
+      }}
+    />
+  );
+}