From 310b7ac0c6e5ed3aaee7666f23775f8fd241a908 Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Thu, 5 Jan 2023 14:39:42 +0200
Subject: [PATCH] add css fallback for themes

---
 src/lib/Nav.svelte |  2 +-
 src/lib/app.css    | 26 ++++++++++++++------------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index e2fd389..cb2f201 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -126,7 +126,7 @@
 	}
 
 	.links > * {
-		@apply p-2 cursor-pointer text-text decoration-none transition-color duration-25 text-sm font-500 flex items-center hover\:text-accent;
+		@apply p-2 cursor-pointer text-text decoration-none transition-color duration-250 text-sm font-500 flex items-center hover\:text-accent;
 	}
 
 	.icon > span {
diff --git a/src/lib/app.css b/src/lib/app.css
index d4106d1..371ff73 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -4,21 +4,10 @@
 	font-display: swap;
 }
 
-html {
+html, html.light {
 	--accent: #00a584;
 	--accent-translucent: #00a58498;
 	--font-primary: "JetBrains Mono", monospace;
-	--primary: #151515;
-	--secondary: #252525;
-	--tertiary: #353535;
-	--text: #ffffffde;
-	--grey: #5454547a;
-	--alt: #333;
-	--alt-text: #ddd;
-	color-scheme: dark;
-}
-
-html.light {
 	--primary: #ffffff;
 	--secondary: #eeeeee;
 	--tertiary: #939393;
@@ -29,6 +18,19 @@ html.light {
 	color-scheme: light;
 }
 
+@media (prefers-color-scheme: dark) {
+	html {
+		--primary: #151515;
+		--secondary: #252525;
+		--tertiary: #353535;
+		--text: #ffffffde;
+		--grey: #5454547a;
+		--alt: #333;
+		--alt-text: #ddd;
+		color-scheme: dark;
+	}
+}
+
 body {
 	@apply font-primary bg-primary text-text m-0 flex flex-col relative min-h-screen leading-relaxed transition-all duration-250;
 }