rudimentary dark mode

src/components/header.astro

@@ -7,7 +7,7 @@ import Navbar from "./navbar.astro";
 <header>
   <Navbar />
   <section>
-    <LanguageIcon class="h-7 w-7 text-primary" />
+    <LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
     <a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
   </section>
 </header>

src/components/hero.astro

@@ -5,7 +5,7 @@ import '@fontsource/dm-sans/700.css';
 
 <section id="hero" class="section">
   <h2 class="md:text-center">Stay focused, browse faster</h2>
-  <p class="max-w-prose md:text-center text-xl text-muted">
+  <p class="max-w-prose md:text-center text-xl text-muted dark:text-muted-dark">
     Zen is beautifully designed, privacy-focused, and packed with features. We
     care about your experience, not your data.
   </p>
@@ -16,7 +16,7 @@ import '@fontsource/dm-sans/700.css';
     <img
       src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
       alt="Zen Logo"
-      class="w-full rounded-lg drop-shadow-2xl"
+      class="w-full rounded-lg drop-shadow-glow"
     />
     <figcaption class="text-md text-muted/95">
       Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.

src/components/navbar.astro

@@ -23,7 +23,7 @@
   @tailwind base;
   @layer base {
     nav {
-      @apply flex justify-center gap-10 text-primary font-semibold text-lg;
+      @apply flex justify-center gap-10 text-primary font-semibold text-lg dark:text-primary-dark;
     }
     ul {
       @apply hidden items-center justify-center gap-10 md:flex;

src/layouts/main.astro

@@ -38,4 +38,8 @@ import '@fontsource/inter';
       linear-gradient(to bottom, rgba(147, 51, 234, 0.03), transparent 30%);
     background-size: cover;
   }
+
+  html {
+    @apply dark:bg-black;
+  }
 </style>

tailwind.config.cjs

@@ -17,7 +17,9 @@ module.exports = {
     extend: {
       colors: {
         primary: "hsl(258, 48%, 23%)",
+        "primary-dark": "hsl(258, 48%, 65%)",
         muted: "hsl(258, 48%, 55%)",
+        "muted-dark": "hsl(258, 48%, 85%)",
       },
       spacing: {
         xs: "0.5rem",
@@ -50,13 +52,20 @@ module.exports = {
         ],
         dm: ["DM Sans"],
       },
+      dropShadow: {
+        glow: [
+          "0 0px 5px hsla(258, 48%, 23%, 0.90)",
+          "0 0px 20px hsla(258, 48%, 23%, 0.75)"
+        ]
+      }
     },
   },
   plugins: [
     plugin(({ addBase, addComponents, addUtilities, theme }) => {
       addBase({
         h2: {
-          "@apply text-scale-large font-bold text-primary": {},
+          "@apply text-scale-large font-bold text-primary dark:text-primary-dark": {},
+
         },
       });
       addComponents({
@@ -71,7 +80,8 @@ module.exports = {
           "@apply text-center place-items-center": {},
         },
         ".btn-base": {
-          "@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300":
+          "@apply bg-black text-white font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white dark:text-black":
+
             {},
         },
       });