From f09320161b04d26aa26bdd141b9b7b4ca3bd39f2 Mon Sep 17 00:00:00 2001
From: anthdm <cryptoanthdm@gmail.com>
Date: Sat, 8 Jun 2024 22:46:37 +0200
Subject: [PATCH] added theme switcher

---
 bootstrap/Makefile                            |   2 +-
 bootstrap/app/assets/app.css                  |  77 ++++++------
 .../app/views/components/navigation.templ     |   7 +-
 .../app/views/components/theme_switcher.templ |  18 +++
 bootstrap/app/views/landing/index.templ       |   2 +-
 bootstrap/app/views/layouts/base_layout.templ |   4 +-
 bootstrap/public/assets/styles.css            | 111 +++++++++++++++---
 7 files changed, 160 insertions(+), 61 deletions(-)
 create mode 100644 bootstrap/app/views/components/theme_switcher.templ

diff --git a/bootstrap/Makefile b/bootstrap/Makefile
index 46dd3f1..a80a509 100644
--- a/bootstrap/Makefile
+++ b/bootstrap/Makefile
@@ -39,7 +39,7 @@ sync_assets:
 
 # start the application in development
 dev:
-	@make -j5 templ server assets sync_assets
+	@make -j4 templ server assets sync_assets
 
 # build the application for production. This will compile your app
 # to a single binary with all its assets embedded.
diff --git a/bootstrap/app/assets/app.css b/bootstrap/app/assets/app.css
index 164a08e..cd7f173 100644
--- a/bootstrap/app/assets/app.css
+++ b/bootstrap/app/assets/app.css
@@ -10,47 +10,50 @@
 		@apply bg-background text-foreground;
 	}
 
+@layer base {
   :root {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 263.4 70% 50.4%;
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
   }
 
   .dark {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 263.4 70% 50.4%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
+}
diff --git a/bootstrap/app/views/components/navigation.templ b/bootstrap/app/views/components/navigation.templ
index 961c972..36100e0 100644
--- a/bootstrap/app/views/components/navigation.templ
+++ b/bootstrap/app/views/components/navigation.templ
@@ -2,10 +2,15 @@ package components
 
 templ Navigation() {
 	<nav class="border-b py-3">
-		<div class="container mx-auto">
+		<div class="container mx-auto flex justify-between">
 			<div class="text-lg text-red-500">
 				<a href="/" class="font-semibold uppercase">Gothkit <span class="text-sm">v0.1</span></a>
 			</div>
+			<div class="flex gap-4 items-center">
+				<div>
+					@ThemeSwitcher()
+				</div>
+			</div>
 		</div>
 	</nav>
 }
diff --git a/bootstrap/app/views/components/theme_switcher.templ b/bootstrap/app/views/components/theme_switcher.templ
new file mode 100644
index 0000000..ce8d945
--- /dev/null
+++ b/bootstrap/app/views/components/theme_switcher.templ
@@ -0,0 +1,18 @@
+package components
+
+templ ThemeSwitcher() {
+	<div x-show="theme === 'dark'" class="cursor-pointer" @click={ "theme = 'light'" }>
+		@LightIcon()
+	</div>
+	<div x-show="theme === 'light'" class="cursor-pointer" @click={ "theme = 'dark'" }>
+		@DarkIcon()
+	</div>
+}
+
+templ DarkIcon() {
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon"><path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4"></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.9 4.9 1.4 1.4"></path><path d="m17.7 17.7 1.4 1.4"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.3 17.7-1.4 1.4"></path><path d="m19.1 4.9-1.4 1.4"></path></svg>
+}
+
+templ LightIcon() {
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
+}
diff --git a/bootstrap/app/views/landing/index.templ b/bootstrap/app/views/landing/index.templ
index 8402b8b..c824a87 100644
--- a/bootstrap/app/views/landing/index.templ
+++ b/bootstrap/app/views/landing/index.templ
@@ -7,7 +7,7 @@ import (
 templ Index() {
 	@layouts.App() {
 		<div class="mt-20 text-center flex flex-col gap-10">
-			<h1 class="text-3xl lg:text-6xl font-bold">A single binary to change the world</h1>
+			<h1 class="max-w-xl mx-auto tracking-wider text-3xl lg:text-6xl font-bold">A single binary to change the world</h1>
 			<a class="text-xl underline text-blue-500" target="_blank" href="https://github.com/anthdm/gothkit">Get started by reading the documentation</a>
 		</div>
 	}
diff --git a/bootstrap/app/views/layouts/base_layout.templ b/bootstrap/app/views/layouts/base_layout.templ
index b96b6e7..5a0e47b 100644
--- a/bootstrap/app/views/layouts/base_layout.templ
+++ b/bootstrap/app/views/layouts/base_layout.templ
@@ -22,10 +22,8 @@ templ BaseLayout() {
 			<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 			<!-- HTMX -->
 			<script src="https://unpkg.com/htmx.org@1.9.9" defer></script>
-			<!-- Font Awesome -->
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"></script>
 		</head>
-		<body>
+		<body x-data="{theme: 'light'}" :class="theme" lang="en">
 			{ children... }
 		</body>
 	</html>
diff --git a/bootstrap/public/assets/styles.css b/bootstrap/public/assets/styles.css
index d60437f..20d8287 100644
--- a/bootstrap/public/assets/styles.css
+++ b/bootstrap/public/assets/styles.css
@@ -457,25 +457,48 @@ body {
 }
 
 :root {
-  --background: 224 71.4% 4.1%;
-  --foreground: 210 20% 98%;
-  --card: 224 71.4% 4.1%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --primary: 263.4 70% 50.4%;
-  --primary-foreground: 210 20% 98%;
-  --secondary: 215 27.9% 16.9%;
-  --secondary-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --accent: 215 27.9% 16.9%;
-  --accent-foreground: 210 20% 98%;
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 72.22% 50.59%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
   --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 20% 98%;
-  --border: 215 27.9% 16.9%;
-  --input: 215 27.9% 16.9%;
-  --ring: 263.4 70% 50.4%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
 }
 
 *, ::before, ::after {
@@ -617,6 +640,14 @@ body {
   max-width: 80rem;
 }
 
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -629,6 +660,10 @@ body {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .gap-10 {
   gap: 2.5rem;
 }
@@ -637,10 +672,35 @@ body {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.border {
+  border-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -691,6 +751,14 @@ body {
   text-transform: uppercase;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -716,3 +784,10 @@ body {
     line-height: 1;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:border-white {
+    --tw-border-opacity: 1;
+    border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  }
+}