svelte - theme toggle

while1618 · Dec 29, 2023 · 956ed53 · 956ed53
1 parent 444b079
commit 956ed53
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/frontend/svelte-kit/src/lib/components/guest-navbar.svelte b/frontend/svelte-kit/src/lib/components/guest-navbar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import MoonIcon from '$lib/icons/moon.svelte';
+  import SunIcon from '$lib/icons/sun.svelte';
   import logo from '$lib/images/logo.png';
 </script>
 
@@ -12,6 +14,11 @@
     </a>
   </div>
   <div class="navbar-end gap-3">
+    <label class="swap swap-rotate">
+      <input type="checkbox" class="theme-controller" value="light" />
+      <SunIcon />
+      <MoonIcon />
+    </label>
     <a href="/auth/sign-in" class="btn">Sign in</a>
     <a href="/auth/sign-up" class="btn">Sign up</a>
   </div>

diff --git a/frontend/svelte-kit/src/lib/components/user-navbar.svelte b/frontend/svelte-kit/src/lib/components/user-navbar.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import ChartIcon from '$lib/icons/chart.svelte';
+  import MoonIcon from '$lib/icons/moon.svelte';
   import ProfileIcon from '$lib/icons/profile.svelte';
   import SettingsIcon from '$lib/icons/settings.svelte';
   import SignOutIcon from '$lib/icons/sign-out.svelte';
+  import SunIcon from '$lib/icons/sun.svelte';
   import avatar from '$lib/images/avatar.jpg';
   import logo from '$lib/images/logo.png';
   // import { RoleName } from '$lib/models/user/role';
@@ -21,7 +23,12 @@
       <span class="text-xl normal-case">BootstrapBugZ</span>
     </a>
   </div>
-  <div class="navbar-end">
+  <div class="navbar-end gap-3">
+    <label class="swap swap-rotate">
+      <input type="checkbox" class="theme-controller" value="light" />
+      <SunIcon />
+      <MoonIcon />
+    </label>
     <div class="dropdown dropdown-end">
       <div tabindex="-1" class="avatar btn btn-circle btn-ghost">
         <div class="w-10 rounded-full">

diff --git a/frontend/svelte-kit/src/lib/icons/moon.svelte b/frontend/svelte-kit/src/lib/icons/moon.svelte
@@ -0,0 +1,5 @@
+<svg class="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+  />
+</svg>
diff --git a/frontend/svelte-kit/src/lib/icons/sun.svelte b/frontend/svelte-kit/src/lib/icons/sun.svelte
@@ -0,0 +1,5 @@
+<svg class="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+  />
+</svg>