💄 Dark theme

src/components/navigation/Footer.astro

@@ -1,5 +1,11 @@
-<footer class="footer footer-center p-5 border-t">
+<footer class="footer footer-center p-5 border-t border-footer">
   <aside>
     <p>Copyright © {new Date().getFullYear()} Solsynth LLC</p>
   </aside>
 </footer>
+
+<style>
+  .border-footer {
+    border-color: var(--fallback-bc, oklch(var(--bc) / 0.1));
+  }
+</style>

src/components/navigation/NavBar.astro

@@ -2,7 +2,7 @@
   class="navbar bg-base-100 text-base-content bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)] shadow-sm"
 >
   <div class="px-5 w-full flex justify-between">
-    <button class="btn btn-ghost text-xl">Solsynth</button>
+    <a href="/" class="btn btn-ghost text-xl">Solsynth</a>
 
     <label id="theme-switch" class="swap swap-rotate me-5">
       <input type="checkbox" class="theme-controller" value="light" />

src/pages/index.astro

@@ -11,7 +11,7 @@ import SolianIcon from "../assets/solian.png";
     <div class="landing-slide">
       <div class="landing-slide-first">
         <div
-          class="aspect-square w-[128px] bg-white shadow-2xl rounded-xl mb-6 ml-[-1rem] flex justify-center items-center"
+          class="aspect-square w-[128px] bg-neutral rounded-xl mb-6 ml-[-4px] flex justify-center items-center"
         >
           <Image
             src={SolarIcon}
@@ -33,21 +33,19 @@ import SolianIcon from "../assets/solian.png";
 
       <div class="landing-slide-second">
         <div class="card w-full md:w-5/6 bg-base-100 shadow-xl">
-          <div class="card-body">
+          <div class="card-body pb-0">
             <h2 class="card-title">Products!</h2>
             <p>Take a look of all our lovely products!</p>
           </div>
-          <hr />
-          <div class="card-body grid grid-cols-4">
-            <div
-              class="aspect-square w-[80px] bg-white flex justify-center items-center shadow-xl rounded-lg"
-            >
+          <div class="divider"></div>
+          <div class="card-body pt-0 grid grid-cols-4">
+            <a href="/products/solar-network">
               <Image
                 src={SolianIcon}
                 alt="Solar Network"
-                class="w-[64px] h-[64px]"
+                class="w-[64px] h-[64px] block"
               />
-            </div>
+            </a>
           </div>
         </div>
       </div>

tailwind.config.mjs

@@ -5,7 +5,32 @@ export default {
     extend: {},
   },
   daisyui: {
-    themes: ["light", "dark"],
+    themes: [
+      {
+        light: {
+          "primary": "#3F51B5",
+          "secondary": "#0091EA",
+          "accent": "#00BFA5",
+          "neutral": "#2c323b",
+          "base-100": "#f3f4f6",
+          "info": "#0091EA",
+          "success": "#00C853",
+          "warning": "#FF6D00",
+          "error": "#D50000",
+        },
+        dark: {
+          "primary": "#3F51B5",
+          "secondary": "#0091EA",
+          "accent": "#00BFA5",
+          "neutral": "#2c323b",
+          "base-100": "#1e2329",
+          "info": "#0091EA",
+          "success": "#00C853",
+          "warning": "#FF6D00",
+          "error": "#D50000",
+        }
+      }
+    ],
   },
   plugins: [
     require('@tailwindcss/typography'),