Replace light/dark switch with sun/moon icon button

- Remove toggle switch, Light/Dark labels, knob/track CSS
- Single button with sun (light) and moon (dark) FA icons
- Icons cross-fade with rotation transition on theme change
- Compact circular button matches FAB aesthetic
- Removed duplicate old switch CSS rules

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/media/js/template.js

@@ -62,30 +62,33 @@
 		wrap.id = 'mokoThemeFab';
 		wrap.className = posClassFromBody();
 
-		// Light label
-		var lblL = doc.createElement('span');
-		lblL.className = 'label';
-		lblL.textContent = 'Light';
-
-		// Switch
+		// Sun/Moon toggle button
 		var switchWrap = doc.createElement('button');
 		switchWrap.id = 'mokoThemeSwitch';
 		switchWrap.type = 'button';
-		switchWrap.setAttribute('role', 'switch');
+		switchWrap.className = 'theme-icon-btn';
 		switchWrap.setAttribute('aria-label', 'Toggle dark mode');
-		switchWrap.setAttribute('aria-checked', 'false');
 
-		var track = doc.createElement('span');
-		track.className = 'switch';
-		var knob = doc.createElement('span');
-		knob.className = 'knob';
-		track.appendChild(knob);
-		switchWrap.appendChild(track);
+		var sunIcon = doc.createElement('i');
+		sunIcon.className = 'fa-solid fa-sun';
+		sunIcon.setAttribute('aria-hidden', 'true');
 
-		// Dark label
-		var lblD = doc.createElement('span');
-		lblD.className = 'label';
-		lblD.textContent = 'Dark';
+		var moonIcon = doc.createElement('i');
+		moonIcon.className = 'fa-solid fa-moon';
+		moonIcon.setAttribute('aria-hidden', 'true');
+
+		switchWrap.appendChild(sunIcon);
+		switchWrap.appendChild(moonIcon);
+
+		function updateThemeIcon(theme) {
+			if (theme === 'dark') {
+				switchWrap.classList.add('is-dark');
+				switchWrap.classList.remove('is-light');
+			} else {
+				switchWrap.classList.add('is-light');
+				switchWrap.classList.remove('is-dark');
+			}
+		}
 
 		// Auto toggle (on/off switch style)
 		var autoWrap = doc.createElement('div');
@@ -127,7 +130,7 @@
 			var current = (root.getAttribute('data-bs-theme') || 'light').toLowerCase();
 			var next = current === 'dark' ? 'light' : 'dark';
 			applyTheme(next);
-			switchWrap.setAttribute('aria-checked', next === 'dark' ? 'true' : 'false');
+			updateThemeIcon(next);
 			// Turn off auto when manually switching
 			auto.classList.remove('on');
 			auto.setAttribute('aria-checked', 'false');
@@ -145,7 +148,7 @@
 				clearStored();
 				var sys = systemTheme();
 				applyTheme(sys);
-				switchWrap.setAttribute('aria-checked', sys === 'dark' ? 'true' : 'false');
+				updateThemeIcon(sys);
 			}
 		});
 
@@ -154,7 +157,7 @@
 			if (!getStored()) {
 				var sys = systemTheme();
 				applyTheme(sys);
-				switchWrap.setAttribute('aria-checked', sys === 'dark' ? 'true' : 'false');
+				updateThemeIcon(sys);
 			}
 		};
 		if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql);
@@ -162,12 +165,10 @@
 
 		// Initial state
 		var initial = getStored() || systemTheme();
-		switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false');
+		updateThemeIcon(initial);
 
 		// Mount
-		wrap.appendChild(lblL);
 		wrap.appendChild(switchWrap);
-		wrap.appendChild(lblD);
 		wrap.appendChild(autoWrap);
 		wrap.appendChild(divider);
 		wrap.appendChild(a11ySlot);