From 07208b69be5e4afcdfbc97c92338064b1183e1ab Mon Sep 17 00:00:00 2001
From: 231tr0n <zeltronsrikar@gmail.com>
Date: Mon, 4 Mar 2024 22:45:40 +0530
Subject: [PATCH] fix(theme): fix theme button and the way it looks

---
 src/lib/components/Navbar.svelte | 44 +++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 4299bf8..c3b82e1 100644
--- 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 {