MAke it dark mode

src/components/cta.astro

@@ -18,7 +18,7 @@ const {
 
 <div
   class="bg-black p-8 md:px-20 md:py-20 mt-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center">
-  <h2 class="text-white text-4xl md:text-6xl tracking-tight">
+  <h2 class="text-black text-4xl md:text-6xl tracking-tight">
     {header}
   </h2>
   <p class="text-slate-400 mt-4 text-lg md:text-xl">

src/components/footer.astro

@@ -1,13 +1,13 @@
 <footer class="my-20">
-  <p class="text-center text-sm text-slate-500">
+  <p class="text-center text-sm text-gray-300">
     Copyright © {new Date().getFullYear()} ItsMeAlfie0. All rights reserved.
   </p>
   <!--
     Can we ask you a favor 🙏
     Please keep this backlink on your website if possible.
     or Purchase a commercial license from https://web3templates.com
   -->
-  <p class="text-center text-xs text-slate-500 mt-1">
+  <p class="text-center text-xs text-gray-300 mt-1">
     Template made by <a
       href="https://web3templates.com"
       target="_blank"

src/components/hero.astro

@@ -23,7 +23,7 @@ import { Icon } from "astro-icon";
       class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight xl:tracking-tighter">
       Nebulus 
     </h1>
-    <p class="text-lg mt-4 text-slate-600 max-w-xl">
+    <p class="text-lg mt-4 text-slate-600 max-w-xl text-white">
       One bot for absolutely everything. From moderation to custom events, we have it all!
     </p>
     <div class="mt-6 flex flex-col sm:flex-row gap-3">
@@ -41,7 +41,7 @@ import { Icon } from "astro-icon";
         href="https://github.com/nebulus-bot"
         class="flex gap-1 items-center justify-center"
         target="_blank">
-        <Icon class="text-black w-4 h-4" name="bx:bxl-github" />
+        <Icon class="text-white w-4 h-4" name="bx:bxl-github" />
         GitHub Organization
       </Link>
     </div>

src/components/navbar/navbar.astro

@@ -24,10 +24,10 @@ const menuitems = [
   <header class="flex flex-col lg:flex-row justify-between items-center my-5">
     <Astronav>
       <div class="flex w-full lg:w-auto items-center justify-between">
-        <a href="/" class="text-lg"><span class="font-bold text-slate-800">Nebulus</span>
+        <a href="/" class="text-lg"><span class="font-bold text-white">Nebulus</span>
         </a>
         <div class="block lg:hidden">
-          <MenuIcon class="w-4 h-4 text-gray-800" />
+          <MenuIcon class="w-4 h-4 text-white" />
         </div>
       </div>
       <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
@@ -47,7 +47,7 @@ const menuitems = [
                   <li>
                     <a
                       href={item.path}
-                      class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
+                      class="flex lg:px-3 py-2 text-white-600 hover:text-gray-300">
                       {item.title}
                     </a>
                   </li>

src/components/pricing.astro

@@ -7,10 +7,10 @@ const { plan } = Astro.props;
 
 <div>
   <div
-    class="flex flex-col w-full order-first lg:order-none border-2 border-[#D8DEE9] border-opacity-50 py-5 px-6 rounded-md">
+    class="flex flex-col w-full order-first lg:order-none border-2 border-gray-500 border-opacity-50 py-5 px-6 rounded-md">
     <div class="text-center">
-      <h4 class="text-lg font-medium text-gray-400">{plan.name}</h4><p
-        class="mt-3 text-4xl font-bold text-black md:text-4xl">
+      <h4 class="text-lg font-medium text-white-400">{plan.name}</h4><p
+        class="mt-3 text-4xl font-bold text-gray-300 md:text-4xl">
         {
           plan.price && typeof plan.price === "object"
             ? plan.price.monthly + " /month"
@@ -27,7 +27,7 @@ const { plan } = Astro.props;
     </div><ul class="grid mt-8 text-left gap-y-4">
       {
         plan.features.map((item) => (
-          <li class="flex items-start gap-3 text-gray-800">
+          <li class="flex items-start gap-3 text-white">
             <Tick class="w-6 h-6" />
             <span>{item}</span>
           </li>
@@ -36,8 +36,7 @@ const { plan } = Astro.props;
     </ul><div class="flex mt-8">
       <Link
         href={plan.button.link || "#"}
-        block
-        style={plan.popular ? "primary" : "outline"}>
+        block>
         {plan.button.text || "Get Started"}
       </Link>
     </div>

src/components/sectionhead.astro

@@ -6,7 +6,7 @@ const { align = "center" } = Astro.props;
   <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">
     <slot name="title">Title</slot>
   </h1>
-  <p class="text-lg mt-4 text-slate-600">
+  <p class="text-lg mt-4 text-gray-300">
     <slot name="desc">Some description goes here</slot>
   </p>
 </div>

src/components/ui/link.astro

@@ -23,8 +23,8 @@ const sizes = {
 };
 
 const styles = {
-  outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
-  primary: "bg-black text-white hover:bg-gray-800  border-2 border-transparent",
+  outline: "bg-gray-700 hover:bg-slate-900 text-white ",
+  primary: "bg-black text-white hover:bg-slate-900  border-2 border-transparent",
   inverted: "bg-white text-black   border-2 border-transparent",
   muted: "bg-gray-100 hover:bg-gray-200   border-2 border-transparent",
 };

src/layouts/Layout.astro

@@ -43,6 +43,14 @@ const makeTitle = title
       img {
         content-visibility: auto;
       }
+
+      :root {
+        background: #32363E;
+      }
+
+      body {
+        color: #FFFFFF;
+      }
     </style>
   </body>
 </html>

src/pages/404.astro

@@ -8,7 +8,7 @@ import Layout from "@layouts/Layout.astro";
     <div class="min-h-[calc(100vh-16rem)] flex items-center justify-center">
       <div class="mt-16 text-center">
         <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">404</h1>
-        <p class="text-lg mt-4 text-slate-600">Page not found. What were you looking for?</p>
+        <p class="text-lg mt-4 text-gray-300">Page not found. What were you looking for?</p>
       </div>
     </div>
   </Container>

src/pages/about.astro

@@ -14,10 +14,10 @@ import Sectionhead from "@components/sectionhead.astro";
     </Sectionhead>
 
     <div class="flex flex-col gap-3 mx-auto max-w-4xl mt-16">
-      <h2 class="font-bold text-3xl text-gray-800">
+      <h2 class="font-bold text-3xl text-white">
         Empowering you to take power of your discord server.
       </h2>
-      <p class="text-lg leading-relaxed text-slate-500">
+      <p class="text-lg leading-relaxed text-gray-300">
         We're a small team of developers building tools for you to take power over your servers. 
         From fun games to custom events, we have all that you need!
       </p>

src/pages/pricing.astro

@@ -8,7 +8,6 @@ const pricing = [
   {
     name: "Personal",
     price: "Free",
-    popular: false,
     features: [
       "Feature List Coming Soon!"
     ],
@@ -20,7 +19,6 @@ const pricing = [
   {
     name: "Startup",
     price: "TBD",
-    popular: true,
     features: [
       "All Free Features",
       "Feature List Coming Soon!",