From 71971a8080b15a23f96809f2188a9f039109301c Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Tue, 7 May 2024 13:36:44 +0300
Subject: [PATCH] chore(theme): switch theme without reload

---
 .../components/themeswitch/themeswitch.templ  | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index fc548f4e..9431ce98 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -48,7 +48,33 @@ templ ThemeSwitch() {
 script changeTheme(themeName string) {
     const themeCookie = "theme-name";
     document.cookie = "theme-name" + "=" + themeName + "; path=/";
-    window.location.reload();
+
+    const themes = {
+        default: {
+            primary: "#7acb65",
+            secondary: "#9ee07e",
+            accent: "#4c8c36",
+            bg: "/static/images/dankground.svg",
+        },
+        black: {
+            primary: "#000",
+            secondary: "#000",
+            accent: "#000",
+            bg: "/static/images/dankground-dark.svg",
+        },
+    };
+
+    const style = document.documentElement.style;
+    const theme = themes[themeName];
+    if (!theme) {
+        window.location.reload();
+        return;
+    }
+
+    style.setProperty('--primary-color', theme.primary);
+    style.setProperty('--secondary-color', theme.secondary);
+    style.setProperty('--accent-color', theme.accent);
+    document.body.style.backgroundImage = `url('${theme.bg}'), linear-gradient(to right, var(--accent-color), var(--secondary-color))`;
 }
 
 script toggleTheThing() {