From a6b3c6be500c382dc93774dec801c95b233b0a47 Mon Sep 17 00:00:00 2001
From: vinayak19th <vinayak1998th@Gmail.com>
Date: Sun, 17 Aug 2025 04:15:24 +0000
Subject: [PATCH 1/2] feat: moved theme toggle next to search bar

---
 .devcontainer/devcontainer.json               |  2 +-
 _includes/sidebar.html                        | 10 ---
 _includes/topbar.html                         | 67 ++++++++++++++-----
 _javascript/modules/components/mode-toggle.js |  4 +-
 _sass/base/_base.scss                         |  1 +
 _sass/layout/_sidebar.scss                    |  6 +-
 _sass/layout/_topbar.scss                     |  4 ++
 7 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 39c428df4ea..1f29a96a69a 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -26,4 +26,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 569585f6f24..ee50a947470 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -41,16 +41,6 @@
   </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
-    {% unless site.theme_mode %}
-      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
-        <i class="fas fa-adjust"></i>
-      </button>
-
-      {% if site.data.contact.size > 0 %}
-        <span class="icon-border"></span>
-      {% endif %}
-    {% endunless %}
-
     {% for entry in site.data.contact %}
       {% case entry.type %}
         {% when 'github', 'twitter' %}
diff --git a/_includes/topbar.html b/_includes/topbar.html
index 735f1d1cf55..73301a39db6 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -54,24 +54,55 @@
         {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
+    {% comment %} Container for buttons {% endcomment %}
+    <div class="d-flex">
+      {% unless site.theme_mode %}
+        <button
+          type="button"
+          class="btn btn-link nav-link"
+          aria-label="Switch Mode"
+          id="mode-toggle"
+          onClick="iconSwap()"
+        >
+          {% comment %} <i class="fas fa-adjust"></i> {% endcomment %}
+          <i class="bi bi-brightness-high-fill"></i>
+        </button>
+      {% endunless %}
+      <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
+        <i class="fas fa-search fa-fw"></i>
+      </button>
 
-    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
-      <i class="fas fa-search fa-fw"></i>
-    </button>
-
-    <search id="search" class="align-items-center ms-3 ms-lg-0">
-      <i class="fas fa-search fa-fw"></i>
-      <input
-        class="form-control"
-        id="search-input"
-        type="search"
-        aria-label="search"
-        autocomplete="off"
-        placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
-      >
-    </search>
-    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
-      {{- site.data.locales[include.lang].search.cancel -}}
-    </button>
+      <search id="search" class="align-items-center">
+        <i class="fas fa-search fa-fw"></i>
+        <input
+          class="form-control"
+          id="search-input"
+          type="search"
+          aria-label="search"
+          autocomplete="off"
+          placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
+        >
+      </search>
+      <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+        {{- site.data.locales[include.lang].search.cancel -}}
+      </button>
+      {% comment %} Theme button {% endcomment %}
+    </div>
   </div>
 </header>
+
+<script>
+  $toggle = document.getElementById('mode-toggle');
+  if (Theme.visualState == 'dark') {
+    $toggle.innerHTML = '<i class="bi bi-brightness-high-fill"></i>';
+  } else if (Theme.visualState == 'light') {
+    $toggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
+  }
+  function iconSwap() {
+    if (Theme.visualState == 'dark') {
+      $toggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
+    } else if (Theme.visualState == 'light') {
+      $toggle.innerHTML = '<i class="bi bi-brightness-high-fill"></i>';
+    }
+  }
+</script>
diff --git a/_javascript/modules/components/mode-toggle.js b/_javascript/modules/components/mode-toggle.js
index 455ff0a02dc..708c2830081 100644
--- a/_javascript/modules/components/mode-toggle.js
+++ b/_javascript/modules/components/mode-toggle.js
@@ -2,9 +2,9 @@
  * Add listener for theme mode toggle
  */
 
-const $toggle = document.getElementById('mode-toggle');
-
 export function modeWatcher() {
+  const $toggle = document.getElementById('mode-toggle');
+  console.log('Mode watcher initialized');
   if (!$toggle) {
     return;
   }
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
index 46e9eb6e83f..b0def61bbd8 100644
--- a/_sass/base/_base.scss
+++ b/_sass/base/_base.scss
@@ -4,6 +4,7 @@
 @use '../abstracts/placeholders';
 @use '../themes/light';
 @use '../themes/dark';
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
 
 :root {
   font-size: 16px;
diff --git a/_sass/layout/_sidebar.scss b/_sass/layout/_sidebar.scss
index eaad470c6c4..68d0667c080 100644
--- a/_sass/layout/_sidebar.scss
+++ b/_sass/layout/_sidebar.scss
@@ -225,11 +225,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       line-height: $btn-size;
     }
 
-    #mode-toggle {
-      @extend %button;
-      @extend %sidebar-links;
-      @extend %sidebar-link-hover;
-    }
+
 
     .icon-border {
       @extend %no-cursor;
diff --git a/_sass/layout/_topbar.scss b/_sass/layout/_topbar.scss
index eb0aea9b0ca..083d58366df 100644
--- a/_sass/layout/_topbar.scss
+++ b/_sass/layout/_topbar.scss
@@ -14,6 +14,10 @@
   }
 }
 
+#mode-toggle {
+      margin-right: 1.5rem;
+    }
+
 #topbar {
   @extend %btn-color;
 

From 4c179382530aa472715d366216263b202738ad25 Mon Sep 17 00:00:00 2001
From: Vinayak Sharma <vinayak1998th@Gmail.com>
Date: Sat, 16 Aug 2025 21:33:22 -0700
Subject: [PATCH 2/2] fix: fixed scss import formatting

Signed-off-by: Vinayak Sharma <vinayak1998th@Gmail.com>
---
 _sass/base/_base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
index b0def61bbd8..fbe98aaec9a 100644
--- a/_sass/base/_base.scss
+++ b/_sass/base/_base.scss
@@ -4,7 +4,7 @@
 @use '../abstracts/placeholders';
 @use '../themes/light';
 @use '../themes/dark';
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
+@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css";
 
 :root {
   font-size: 16px;