Overhaul ThemeToggler

linkdotnet · Nov 8, 2024 · 36af3c4 · 36af3c4
1 parent 74dc35f
commit 36af3c4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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();
 		}
 	}