Themes: cleanup slightly

src/layouts/Layout.astro

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

src/styles/global.css

@@ -1,4 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+/* Themes belong here */
+@import "./themes/default.css"; /* DO NOT MOVE THIS FROM HERE OTHERWISE, THEMES WILL FAIL TO WORK */
+@import "./themes/bluelight.css";
+@import "./themes/cyberpunk.css";
+@import "./themes/midnight.css";
+/* End theme imports */
+
 @import "tailwindcss";
 
 @theme {

src/styles/themes/bluelight.css

@@ -1,21 +1,21 @@
 .bluelight {
-    --background: hsl(230 8% 85%) !important;
-    --foreground: hsl(229 26% 28%) !important;
-    --muted: hsl(230 12% 81%) !important;
-    --muted-foreground: hsl(230 12% 21%) !important;
-    --popover: hsl(230 8% 82%) !important;
-    --popover-foreground: hsl(229 26% 18%) !important;
-    --card: hsl(230 8% 83%) !important;
-    --card-foreground: hsl(229 26% 23%) !important;
-    --border: hsl(0 0% 80%) !important;
-    --input: hsl(0 0% 77%) !important;
-    --primary: hsl(223 42% 57%) !important;
-    --primary-foreground: hsl(0 0% 100%) !important;
-    --secondary: hsl(223 30% 75%) !important;
-    --secondary-foreground: hsl(223 30% 15%) !important;
-    --accent: hsl(230 8% 70%) !important;
-    --accent-foreground: hsl(230 8% 10%) !important;
-    --destructive: hsl(2 82% 30%) !important;
-    --destructive-foreground: hsl(2 82% 90%) !important;
-    --ring: hsl(223 42% 57%) !important;
+    --background: hsl(230 8% 85%);
+    --foreground: hsl(229 26% 28%);
+    --muted: hsl(230 12% 81%);
+    --muted-foreground: hsl(230 12% 21%);
+    --popover: hsl(230 8% 82%);
+    --popover-foreground: hsl(229 26% 18%);
+    --card: hsl(230 8% 83%);
+    --card-foreground: hsl(229 26% 23%);
+    --border: hsl(0 0% 80%);
+    --input: hsl(0 0% 77%);
+    --primary: hsl(223 42% 57%);
+    --primary-foreground: hsl(0 0% 100%);
+    --secondary: hsl(223 30% 75%);
+    --secondary-foreground: hsl(223 30% 15%);
+    --accent: hsl(230 8% 70%);
+    --accent-foreground: hsl(230 8% 10%);
+    --destructive: hsl(2 82% 30%);
+    --destructive-foreground: hsl(2 82% 90%);
+    --ring: hsl(223 42% 57%);
   }

src/styles/themes/cyberpunk.css

@@ -1,21 +1,21 @@
 .cyberpunk {
-    --background: hsl(253 41% 19%) !important;
-    --foreground: hsl(157 100% 50%) !important;
-    --muted: hsl(253 12% 23%) !important;
-    --muted-foreground: hsl(253 12% 73%) !important;
-    --popover: hsl(253 41% 16%) !important;
-    --popover-foreground: hsl(157 100% 60%) !important;
-    --card: hsl(253 41% 17%) !important;
-    --card-foreground: hsl(157 100% 55%) !important;
-    --border: hsl(253 31% 24%) !important;
-    --input: hsl(253 31% 27%) !important;
-    --primary: hsl(167 100% 50%) !important;
-    --primary-foreground: hsl(167 100% 10%) !important;
-    --secondary: hsl(167 30% 25%) !important;
-    --secondary-foreground: hsl(167 30% 85%) !important;
-    --accent: hsl(253 41% 34%) !important;
-    --accent-foreground: hsl(254 41% 94%) !important;
-    --destructive: hsl(5 92% 45%) !important;
-    --destructive-foreground: hsl(0 0% 100%) !important;
-    --ring: hsl(167 100% 50%) !important;
+    --background: hsl(253 41% 19%);
+    --foreground: hsl(157 100% 50%);
+    --muted: hsl(253 12% 23%);
+    --muted-foreground: hsl(253 12% 73%);
+    --popover: hsl(253 41% 16%);
+    --popover-foreground: hsl(157 100% 60%);
+    --card: hsl(253 41% 17%);
+    --card-foreground: hsl(157 100% 55%);
+    --border: hsl(253 31% 24%);
+    --input: hsl(253 31% 27%);
+    --primary: hsl(167 100% 50%);
+    --primary-foreground: hsl(167 100% 10%);
+    --secondary: hsl(167 30% 25%);
+    --secondary-foreground: hsl(167 30% 85%);
+    --accent: hsl(253 41% 34%);
+    --accent-foreground: hsl(254 41% 94%);
+    --destructive: hsl(5 92% 45%);
+    --destructive-foreground: hsl(0 0% 100%);
+    --ring: hsl(167 100% 50%);
   }

src/styles/themes/default.css

@@ -1,6 +1,3 @@
-@import "./bluelight.css";
-@import "./cyberpunk.css";
-@import "./midnight.css";
 :root {
     --background: hsl(214 27.37% 7.55%);
     --foreground: hsl(212 16% 82%);
@@ -22,5 +19,4 @@
     --destructive-foreground: hsl(0 0% 100%);
     --ring: hsl(215.09 100% 98.03%);
     --radius: hsl(0.4rem);
-    --font-family: Inter;
 }

src/utils/settings.ts

@@ -67,7 +67,7 @@ class Settings {
     theme(theme?: string) {
         this.#storageManager.setVal('theme', theme || this.#storageManager.getVal('theme'));
         theme === 'default' 
-            ? document.documentElement.className = '' 
+            ? document.documentElement.className = 'default' 
             : document.documentElement.className = theme || this.#storageManager.getVal('theme');
     }