Refactor and unify header buttons

Author: one-data-cookie

_includes/header.html

@@ -53,9 +53,7 @@ <h4>{{ site.heading }}</h4>
         <div class="navbar-item navbar-dark-mode__mobile" onclick="modeSwitcher()">
           <div class="buttons">
             <a class="button is-text">
-              <span class="icon is-small">
-                <img src="../assets/img/moon.svg" id="theme-toggle-img--mobile">
-              </span>
+              <span class="theme-toggle-btn" id="theme-toggle-img--mobile">☀</span>
             </a>
           </div>
         </div>
@@ -113,9 +111,7 @@ <h4>{{ site.heading }}</h4>
             </a>
             <!-- Theme Switcher Button -->
             <a class="button is-text" onclick="modeSwitcher()">
-              <span class="icon is-small">
-                <img src="../assets/img/moon.svg" id="theme-toggle-img">
-              </span>
+              <span class="theme-toggle-btn" id="theme-toggle-img">☀</span>
             </a>
           </div>
         </div>

assets/css/style.css

@@ -1603,15 +1603,22 @@ label.margin-toggle:not(.sidenote-number) {
 
 /* Command Palette Button Styles */
 .cmd-palette-btn {
-    font-weight: 1000;
-    font-size: 25px;
+    font-weight: 600;
+    font-size: 1.25rem;
     text-decoration: none;
 }
 
 /* ChatMK Button Styles */
 .chatmk-btn {
-    font-weight: 1000;
-    font-size: 25px;
+    font-weight: 600;
+    font-size: 1.25rem;
+    text-decoration: none;
+}
+
+/* Theme Toggle Button Styles */
+.theme-toggle-btn {
+    font-weight: 600;
+    font-size: 1.25rem;
     text-decoration: none;
 }
 
@@ -1630,7 +1637,10 @@ label.margin-toggle:not(.sidenote-number) {
 .cmd-palette-btn:active,
 .chatmk-btn:hover,
 .chatmk-btn:focus,
-.chatmk-btn:active {
+.chatmk-btn:active,
+.theme-toggle-btn:hover,
+.theme-toggle-btn:focus,
+.theme-toggle-btn:active {
     outline: none !important;
     box-shadow: none !important;
     background-color: transparent !important;
@@ -1656,6 +1666,25 @@ a:has(.chatmk-btn):hover {
     text-decoration: none !important;
 }
 
+/* Remove underline from theme toggle button links */
+a:has(.theme-toggle-btn) {
+    text-decoration: none !important;
+}
+
+a:has(.theme-toggle-btn):hover {
+    text-decoration: none !important;
+}
+
+/* Smaller buttons on mobile screens */
+@media screen and (max-width: 768px) {
+    .chatmk-btn,
+    .cmd-palette-btn,
+    .theme-toggle-btn {
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+}
+
 /* Mobile navbar positioning - keep command palette next to theme switcher */
 @media screen and (max-width: 1023px) {
     .navbar-brand {
@@ -1671,7 +1700,7 @@ a:has(.chatmk-btn):hover {
 
     .mobile-buttons-group {
         display: flex;
-        gap: 0;
+        gap: 0.5rem;
         align-items: center;
         margin-left: auto;
         margin-right: 0.5rem;

assets/img/moon.svg

@@ -4,13 +4,13 @@ https://github.com/derekkedziora/jekyll-demo
 Creative Commons Attribution 4.0 International License
 */
 
-// Utility to update theme toggle icons
-function changeIconImgSrc(src) {
-  const img = document.getElementById("theme-toggle-img");
-  const mobileImg = document.getElementById("theme-toggle-img--mobile");
+// Utility to update theme toggle symbols
+function changeIconSymbol(symbol) {
+  const toggle = document.getElementById("theme-toggle-img");
+  const mobileToggle = document.getElementById("theme-toggle-img--mobile");
   // Added null checks to prevent errors
-  if (img) img.src = src;
-  if (mobileImg) mobileImg.src = src;
+  if (toggle) toggle.textContent = symbol;
+  if (mobileToggle) mobileToggle.textContent = symbol;
 }
 
 // Retrieve theme from sessionStorage
@@ -19,31 +19,31 @@ let theme = sessionStorage.getItem('theme');
 // Apply theme based on stored value or default to dark
 if (theme === "light") {
   document.documentElement.setAttribute('data-theme', 'light');
-  changeIconImgSrc("../assets/img/moon.svg");
+  changeIconSymbol("☾");
 } else {
   // Default to dark if no preference or saved theme is dark
   document.documentElement.setAttribute('data-theme', 'dark');
-  changeIconImgSrc("../assets/img/sun.svg");
+  changeIconSymbol("☀");
   sessionStorage.setItem('theme', 'dark');
 }
 
 // Function to toggle theme manually
 function modeSwitcher() {
   // Get current theme from sessionStorage
   let currentTheme = sessionStorage.getItem('theme');
-  let newTheme, iconSrc;
+  let newTheme, iconSymbol;
 
   if (currentTheme === 'dark') {
     newTheme = 'light';
-    iconSrc = "../assets/img/moon.svg";
+    iconSymbol = "☾";
   } else {
     newTheme = 'dark';
-    iconSrc = "../assets/img/sun.svg";
+    iconSymbol = "☀";
   }
 
-  // Apply the new theme and update icon
+  // Apply the new theme and update symbol
   document.documentElement.setAttribute('data-theme', newTheme);
-  changeIconImgSrc(iconSrc);
+  changeIconSymbol(iconSymbol);
 
   // Store the new theme for the current session
   sessionStorage.setItem('theme', newTheme);