From 39588c04fdedafd9cebaa54f70273b9d0dfdbaf8 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Tue, 18 Jul 2023 17:52:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=83=20Adds=20darktheme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/app.css        | 17 -----------------
 app/src/index.css      | 32 ++++++++++++++++++++++++++++++++
 app/tailwind.config.js | 17 ++++++++++++++++-
 3 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/app/src/app.css b/app/src/app.css
index 819155f..31f8945 100644
--- a/app/src/app.css
+++ b/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;
-	}
-}
diff --git a/app/src/index.css b/app/src/index.css
index b5c61c9..6dec895 100644
--- a/app/src/index.css
+++ b/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;
+    }
+  } */
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 833de91..34038df 100644
--- a/app/tailwind.config.js
+++ b/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: []
 };