From 492f80f797949a1d75ebba45b8442e43c503bfec Mon Sep 17 00:00:00 2001
From: AlexRoehm <alex@roehms.de>
Date: Sun, 11 Aug 2024 19:37:44 +0200
Subject: [PATCH] darkmode swich button

---
 components/Page/NavBar.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/Page/NavBar.vue b/components/Page/NavBar.vue
index 274ffe6..5a13856 100644
--- a/components/Page/NavBar.vue
+++ b/components/Page/NavBar.vue
@@ -42,19 +42,19 @@
         </div>
         <div class="flex flex-row items-center w-1/6 place-content-end">
           <div v-if="$props.enableDarkOption" >
-          <button  class="pr-2 hover:text-skin-accent hover:cursor-pointer" 
-                  data-testid="NavBar.darkmode" @click.stop="switchColorMode">
-            <svg v-if="$props.darkmode" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-              stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
-            </svg>
-            <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
-            </svg>
-          </button>
+            <button class="pr-2 hover:text-skin-accent hover:cursor-pointer" data-testid="NavBar.darkmode"
+              @click.stop="switchColorMode">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor" class="dark:block hidden w-4 h-4 sm:w-5 sm:h-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="dark:hidden visible w-4 h-4 sm:w-5 sm:h-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+              </svg>
+            </button>
         </div>
           <div  v-if="showMenuButton" >
           <button class="hover:text-skin-accent hover:cursor-pointer mt-1" data-testid="NavBar.clickableElement" @click.stop="toggle('menu')">