Fix theme toggle: SVG icons, cache bust JS, no emoji

Author: OpenClaw Sync

_layouts/default.html

@@ -12,7 +12,7 @@
           <a href="{{ "/blog/" | relative_url }}" {% if page.url == "/blog/" %}aria-current="page"{% endif %}>Blog</a>
           <a href="{{ "/about/" | relative_url }}" {% if page.url == "/about/" %}aria-current="page"{% endif %}>About</a>
           <a href="{{ "/contact/" | relative_url }}" {% if page.url == "/contact/" %}aria-current="page"{% endif %}>Contact</a>
-          <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">☀️</button>
+          <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode"></button>
         </nav>
       </header>
 
@@ -24,6 +24,6 @@
         <p>© {{ "now" | date: "%Y" }} Devin Bernosky.</p>
       </footer>
     </div>
-    <script src="{{ "/assets/js/main.js" | relative_url }}" defer></script>
+    <script src="{{ "/assets/js/main.js?v=2" | relative_url }}" defer></script>
   </body>
 </html>

assets/js/main.js

@@ -1,38 +1,46 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', function() {
+  // SVG icons
+  var sun = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3.5"/><line x1="8" y1="1" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="15"/><line x1="1" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="15" y2="8"/><line x1="3.05" y1="3.05" x2="4.46" y2="4.46"/><line x1="11.54" y1="11.54" x2="12.95" y2="12.95"/><line x1="3.05" y1="12.95" x2="4.46" y2="11.54"/><line x1="11.54" y1="4.46" x2="12.95" y2="3.05"/></svg>';
+  var moon = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13.5 8.5a5.5 5.5 0 0 1-7-7 5.5 5.5 0 1 0 7 7z"/></svg>';
+
   // Theme toggle
-  const toggle = document.getElementById('theme-toggle');
-  const update = () => {
-    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-    toggle.textContent = isDark ? '☀️' : '🌙';
-  };
-
-  toggle.addEventListener('click', () => {
-    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-    const next = isDark ? 'light' : 'dark';
+  var toggle = document.getElementById('theme-toggle');
+  if (!toggle) return;
+
+  function isDark() {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  }
+
+  function updateIcon() {
+    toggle.innerHTML = isDark() ? sun : moon;
+  }
+
+  toggle.addEventListener('click', function() {
+    var next = isDark() ? 'light' : 'dark';
     document.documentElement.setAttribute('data-theme', next);
     localStorage.setItem('theme', next);
-    update();
+    updateIcon();
   });
 
-  update();
+  updateIcon();
 
   // Back to top button
-  const topBtn = document.createElement('a');
+  var topBtn = document.createElement('a');
   topBtn.href = '#';
   topBtn.className = 'back-to-top';
   topBtn.setAttribute('aria-label', 'Back to top');
-  topBtn.textContent = '↑';
+  topBtn.textContent = '\u2191';
   document.body.appendChild(topBtn);
 
-  window.addEventListener('scroll', () => {
+  window.addEventListener('scroll', function() {
     if (window.scrollY > 400) {
       topBtn.classList.add('visible');
     } else {
       topBtn.classList.remove('visible');
     }
   }, { passive: true });
 
-  topBtn.addEventListener('click', (e) => {
+  topBtn.addEventListener('click', function(e) {
     e.preventDefault();
     window.scrollTo({ top: 0, behavior: 'smooth' });
   });