Every theme (besides catppuccin, there are mutliple flavors of this)

src/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-import "@styles/themes/default.css";
+import "@styles/themes/index.css";
 import "@styles/global.css";
 import { ClientRouter } from "astro:transitions";
 import Loader from "@components/Loader.astro";

src/styles/themes/index.css

@@ -1,5 +1,6 @@
 @import "./bluelight.css";
 @import "./cyberpunk.css";
+@import "./midnight.css";
 :root {
     --background: hsl(214 27.37% 7.55%);
     --foreground: hsl(212 16% 82%);

src/styles/themes/midnight.css

@@ -0,0 +1,22 @@
+.midnight {
+    --background: hsl(0 0% 0%) !important;
+    --foreground: hsl(0 0% 100%) !important;
+    --muted: hsl(0 0% 0%) !important;
+    --muted-foreground: hsl(0 0% 50%) !important;
+    --popover: hsl(0 0% 0%) !important;
+    --popover-foreground: hsl(0 0% 95%) !important;
+    --card: hsl(0 0% 5%) !important;
+    --card-foreground: hsl(0 0% 90%) !important;
+    --border: hsl(0 0% 25%) !important;
+    --input: hsl(0 0% 20%) !important;
+    --primary: hsl(158 97% 53%) !important;
+    --primary-foreground: hsl(0 0% 0%) !important;
+    --secondary: hsl(0 0% 8%) !important;
+    --secondary-foreground: hsl(167 0% 85%) !important;
+    --accent: hsl(0 0% 12%) !important;
+    --accent-foreground: hsl(0 0% 90%) !important;
+    --destructive: hsl(360 100% 65%) !important;
+    --destructive-foreground: hsl(0 0% 100%) !important;
+    --ring: hsl(0 0% 70%) !important;
+    --radius: hsl(0.4rem) !important;
+}