From 36af3c4b9cc8ae9489ab7e75e5f0379752a5e41e Mon Sep 17 00:00:00 2001
From: Steven Giesel <stgiesel35@gmail.com>
Date: Fri, 8 Nov 2024 21:06:31 +0100
Subject: [PATCH] Overhaul ThemeToggler

---
 .../Features/Home/Components/NavMenu.razor    |  2 +-
 .../Home/Components/ThemeToggler.razor        | 37 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
index 6cf2e685..420bf3c5 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
@@ -54,7 +54,7 @@
                 </li>
 
                 <AccessControl CurrentUri="@currentUri"></AccessControl>
-                <li><ThemeToggler Class="nav-link"></ThemeToggler></li>
+                <li class="nav-item d-flex align-items-center justify-content-center"><ThemeToggler Class="nav-link"></ThemeToggler></li>
                 <li class="d-flex">
                     <SearchInput SearchEntered="NavigateToSearchPage"></SearchInput>
                 </li>
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/ThemeToggler.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/ThemeToggler.razor
index 50f63cde..ab2f4686 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/ThemeToggler.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/ThemeToggler.razor
@@ -2,7 +2,41 @@
 @inject IJSRuntime JSRuntime
 @inject ILocalStorageService LocalStorageService
 
-<span class="@Class theme-toggle" style="cursor: pointer" @onclick="ToggleMode"> Color Mode</span>
+<div class="position-relative d-inline-block @Class cursor-pointer" role="button" @onclick="ToggleMode" title="Toggle theme">
+
+	@if (currentTheme == "light")
+	{
+		<svg xmlns="http://www.w3.org/2000/svg"
+		     width="20"
+		     height="20"
+		     viewBox="0 0 24 24"
+		     fill="none"
+		     stroke="currentColor"
+		     class="text-secondary">
+			<circle cx="12" cy="12" r="5"/>
+			<line x1="12" y1="1" x2="12" y2="3"/>
+			<line x1="12" y1="21" x2="12" y2="23"/>
+			<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+			<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+			<line x1="1" y1="12" x2="3" y2="12"/>
+			<line x1="21" y1="12" x2="23" y2="12"/>
+			<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+			<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+		</svg>
+	}
+	else
+	{
+		<svg xmlns="http://www.w3.org/2000/svg"
+		     width="20"
+		     height="20"
+		     viewBox="0 0 24 24"
+		     fill="none"
+		     stroke="currentColor"
+		     class="text-white">
+			<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+		</svg>
+	}
+</div>
 
 @code {
 	[Parameter]
@@ -22,6 +56,7 @@
 				: await JSRuntime.InvokeAsync<string>("getCurrentSystemPreference");
 
 			await JSRuntime.InvokeVoidAsync("setTheme", currentTheme);
+			StateHasChanged();
 		}
 	}