🎃 Adds darktheme

app/src/app.css

@@ -3,10 +3,6 @@
 	line-height: 1.5;
 	font-weight: 400;
 
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
-
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
@@ -17,16 +13,3 @@
 body {
 	margin: 0;
 }
-
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
-}

app/src/index.css

@@ -1,3 +1,35 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* @layer base {
+    :root {
+        --primary: 98 0 238;
+        --primary-variant: 55 0 179;
+        --secondary: 55 0 179;
+        --secondary-variant: 55 0 179;
+        --background: 255 255 255;
+        --surface: 251 251 250;
+        --error: 176 0 32;
+        --on-primary: 255 255 255;
+        --on-secondary: 0 0 0;
+        --on-background: 0 0 0;
+        --on-surface: 0 0 0;
+        --on-error: 255 255 255;
+    }
+  
+    :root[class~="dark"] {
+        --primary: 98 0 238;
+        --primary-variant: 55 0 179;
+        --secondary: 55 0 179;
+        --secondary-variant: 55 0 179;
+        --background: 30 30 30;
+        --surface: 36 36 36;
+        --error: 176 0 32;
+        --on-primary: 255 255 255;
+        --on-secondary: 255 255 255;
+        --on-background: 255 255 255;
+        --on-surface: 255 255 255;
+        --on-error: 255 255 255;
+    }
+  } */

app/tailwind.config.js

@@ -2,7 +2,22 @@
 export default {
 	content: ['./src/**/*.{html,js,ts,svelte}'],
 	theme: {
-		extend: {}
+        extend: {
+          colors: {
+            'primary': '#6200EE',
+            'primary-variant': '#3700B3',
+            'secondary': '#3700B3',
+            'secondary-variant': '#3700B3',
+            'background': '#1e1e1e',
+            'surface': '#2c2c2c',
+            'error': '#B00020',
+            'on-primary': '#FFFFFF',
+            'on-secondary': '#FFFFFF',
+            'on-background': '#FFFFFF',
+            'on-surface': '#FFFFFF',
+            'on-error': '#FFFFFF',
+          }
+        },
 	},
 	plugins: []
 };