Basic stuff

src/styles/themes/bluelight.css

@@ -0,0 +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;
+  }

src/styles/themes/cyberpunk.css

@@ -0,0 +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;
+  }

src/styles/themes/default.css

@@ -0,0 +1,24 @@
+@import "./bluelight.css";
+@import "./cyberpunk.css";
+:root {
+    --background: hsl(214 27.37% 7.55%);
+    --foreground: hsl(212 16% 82%);
+    --muted: hsl(214 12% 16%);
+    --muted-foreground: hsl(214 12% 66%);
+    --popover: hsl(214 27% 9%);
+    --popover-foreground: hsl(212 16% 92%);
+    --card: hsl(214 23.58% 9.03%);
+    --card-foreground: hsl(212 16% 87%);
+    --border: hsl(214 17% 17%);
+    --input: hsl(214 17% 20%);
+    --primary: hsl(194.72 85% 45%);
+    --primary-foreground: hsl(189 85% 5%);
+    --secondary: hsl(221.89 18.13% 22.46%);
+    --secondary-foreground: hsl(189 30% 85%);
+    --accent: hsl(221.89 18.13% 22.46%);
+    --accent-foreground: hsl(214 27% 87%);
+    --destructive: hsl(6 96% 59%);
+    --destructive-foreground: hsl(0 0% 100%);
+    --ring: hsl(215.09 100% 98.03%);
+    --radius: hsl(0.4rem);
+}