Fix dark mode logo

Author: Folyd

theme/components/Landingpage/features.yaml

@@ -256,8 +256,8 @@ web:
       - code: |
           post /signin {
               body {
-                  username: str
-                  password: str
+                  username: str,
+                  password: str,
               }
 
               // Verify username and password correctly
@@ -743,4 +743,4 @@ std-library:
           // sort - Sort the array
           let sorted = numbers.sort();
           print(sorted);  // expect: [1, 3, 3, 5, 8, 10, 15, 20, 30, 40]
-        filename: builtin.ai
+        filename: builtin.ai

theme/components/hero/index.module.scss

@@ -82,6 +82,35 @@
     height: 180px;
   }
 
+  .lightLogo {
+    display: block;
+  }
+
+  .darkLogo {
+    display: none;
+  }
+
+  :global(.dark) & {
+    .lightLogo {
+      display: none;
+    }
+
+    .darkLogo {
+      display: block;
+    }
+  }
+}
+
+:global {
+  .dark .logo {
+    .lightLogo {
+      display: none;
+    }
+
+    .darkLogo {
+      display: block;
+    }
+  }
 }
 
 .title {

theme/components/hero/index.tsx

@@ -65,6 +65,7 @@ type HeroProps = {
 
   showStars?: boolean;
   logoUrl?: string;
+  darkLogoUrl?: string;
   title?: string;
   subTitle?: string;
   description?: string;
@@ -78,6 +79,7 @@ export const Hero: FC<HeroProps> = ({
   onClickLearnMore,
   showStars = false,
   logoUrl = '/aiscript-logo.svg',
+  darkLogoUrl = '/aiscript-logo-white.svg',
   title = '',
   subTitle = '',
   description = '',
@@ -107,7 +109,12 @@ export const Hero: FC<HeroProps> = ({
         <div className={styles.logo}>
           <img
             src={logoUrl}
-            className={`${styles.logoImg} rs-logo`}
+            className={`${styles.logoImg} ${styles.lightLogo} rs-logo`}
+            alt="logo"
+          />
+          <img
+            src={darkLogoUrl}
+            className={`${styles.logoImg} ${styles.darkLogo} rs-logo`}
             alt="logo"
           />
         </div>