fix(theme): fix theme button and the way it looks

teambi0s · Mar 4, 2024 · 07208b6 · 07208b6
1 parent 72d98ba
commit 07208b6
Showing 1 changed file with 35 additions and 9 deletions.
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  let dark = '/images/dark.svg';
-  let light = '/images/light.avif';
-  let src = dark;
 
   let toggletheme = () => {
     window.document.body.classList.toggle('light');
-    src = window.document.body.classList.contains('light') ? light : dark;
     if (browser) {
       localStorage.setItem(
         'theme',
@@ -35,14 +31,32 @@
   </div>
   <h3 class="roboto-condensed-bold">pentest@bi0s: bash</h3>
   <button on:click={toggletheme} class="theme-button">
-    <img alt={src == dark ? 'Dark Theme' : 'Light Theme'} {src} />
+    <img src="/images/dark.svg" class="dark-mode-icon" />
+    <img src="/images/light.avif" class="light-mode-icon" />
   </button>
 </div>
 
 <style>
+  .light-mode-icon {
+    filter: brightness(50%);
+  }
+
+  :global(body.light) .light-mode-icon {
+    filter: brightness(100%);
+  }
+
+  .dark-mode-icon {
+    filter: brightness(100%);
+  }
+
+  :global(body.light) .dark-mode-icon {
+    filter: brightness(130%);
+  }
+
   .button-group {
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
   .terminal-button {
@@ -65,11 +79,23 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 25px;
-    width: 25px;
-    border-radius: 50%;
+    height: 30px;
+    width: 50px;
+    border-radius: 5px;
     background-color: transparent;
-    border: 0px;
+    border: 2px solid var(--color-dark-foreground);
+  }
+
+  :global(body.light) .theme-button {
+    border: 2px solid var(--color-light-foreground);
+  }
+
+  .theme-button:hover {
+    border: 2px solid var(--color-blue);
+  }
+
+  :global(body.light) .theme-button:hover {
+    border: 2px solid var(--color-blue);
   }
 
   img {