feat: add dark mode for card on home page

Closes: #3

docusaurus.config.ts

@@ -74,6 +74,7 @@ const config: Config = {
       logo: {
         alt: 'My Site Logo',
         src: 'img/agent.png',
+        srcDark: 'img/agent-dark.png',
       },
       items: [
         {

src/pages/index.module.css

@@ -38,7 +38,6 @@
   -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.45);
   -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.45);
   box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.45);
-  background-color: #fff;
   padding: 15px;
   font: 400 12px Roboto, sans-serif;
   box-sizing: initial;
@@ -67,8 +66,8 @@
 }
 
 .avatar {
-  width: 84px;
-  height: 116px;
+  width: auto;
+  height: auto;
   max-width: initial;
 }
 
@@ -87,13 +86,11 @@
 }
 
 .header__main {
-  color: #000;
   text-align: center;
   font-size: 24px;
 }
 
 .header__tagline {
-  color: #000;
   text-align: center;
   font-size: 10px;
 }
@@ -110,7 +107,6 @@
 }
 
 .content__description {
-  color: #000;
   text-align: center;
 }
 
@@ -127,9 +123,11 @@
 .github-icon {
   width: auto;
   height: 100%;
+  fill: var(--ifm-font-color-base);
 }
 
 .discord-icon {
   width: auto;
   height: 100%;
+  fill: var(--ifm-font-color-base);
 }

src/pages/index.tsx

@@ -3,13 +3,43 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import { useColorMode } from '@docusaurus/theme-common';
 import Heading from '@theme/Heading';
 
 import styles from './index.module.css';
 
 function Avatar() {
+  const { colorMode } = useColorMode();
   return (
-    <img className={styles['avatar']} loading="lazy" srcSet="img/agent.png" />
+    <img
+      className={styles['avatar']}
+      loading="lazy"
+      srcSet={colorMode === 'dark' ? 'img/agent-dark.png' : 'img/agent.png'}
+    />
+  );
+}
+
+function DiscordIcon() {
+  const path = 'img/discord-icon.svg#discord-icon'
+  return (
+    <svg
+      className={styles['discord-icon']}
+      viewBox='0 0 22.279521 17.139999'
+    >
+      <use xlinkHref={path} href={path} />
+    </svg>
+  );
+}
+
+function GithubIcon() {
+  const path = 'img/github-icon.svg#github-icon'
+  return (
+    <svg
+      className={styles['github-icon']}
+      viewBox='0 0 16 16'
+    >
+      <use xlinkHref={path} href={path} />
+    </svg>
   );
 }
 
@@ -36,13 +66,13 @@ function HomepageHeader() {
             className={styles['icon-container']}
             to={siteConfig.customFields.githubUrl}
           >
-            <img className={styles['github-icon']} src="img/github-icon.svg" />
+            {GithubIcon()}
           </Link>
           <Link
             className={styles['icon-container']}
             to={siteConfig.customFields.discordInviteUrl}
           >
-            <img className={styles['discord-icon']} src="img/discord-icon.svg" />
+            {DiscordIcon()}
           </Link>
         </div>
       </div>