Added color switching, moved scripts into dedicated files

templates/base.html

@@ -6,14 +6,9 @@
   {% block head %}
     <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
     <meta charset="utf-8" />
-    <script>
-    (function () {
-      const stored = localStorage.getItem('theme');
-      if (stored === 'dark' || stored === 'light') {
-        document.documentElement.setAttribute('data-theme', stored);
-      }
-    })();
-    </script>
+
+    <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/theme-init.js"></script>
+
     <link rel="stylesheet" type="text/css" href="{{ main_siteurl | default(SITEURL) }}/theme/css/site.css" />
 
     {% if FEED_ALL_ATOM %}
@@ -62,7 +57,11 @@
       </ul>
       <span class="header-delimiter">·</span>
       {% endif %}
+      <button id="font-toggle" aria-label="Toggle font">Aa</button>
+      <span class="header-delimiter">·</span>
       <button id="theme-toggle" aria-label="Toggle color theme">◐</button>
+      <span class="header-delimiter">·</span>
+      <button id="accent-toggle" aria-label="Toggle accent color"></button>
     </div>
     <h1><a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
   </header><!-- /#banner -->
@@ -94,9 +93,23 @@
       <ul id="categories" class="menuitems">
         {% for cat, null in categories %}
         <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
-      {% endfor %}
+        {% endfor %}
       </ul>
       {% endif %}
+      {% if DISPLAY_TAG_CLOUD_ON_MENU | default(true) and tags is defined and tags %}
+      {% set tag_counts = tags | map('last') | map('length') | list %}
+      {% set max_count = tag_counts | max %}
+      {% if max_count and max_count > 0 %}
+      <ul id="tag-cloud" class="menuitems">
+        {% for tag, articles_in_tag in tags | sort %}
+        {% set weight = ((articles_in_tag | length) / max_count * 4) | round(0, 'ceil') | int %}
+        <li class="tag-weight-{{ weight }}">
+          <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      {% endif %}
     </nav><!-- /#menu -->
     <main id="content">
     {% block content %}
@@ -112,71 +125,14 @@
 
   <div class="lightbox-overlay" id="lightbox-overlay">
     <div class="lightbox-content">
-      <img id="lightbox-img" src="" alt="">
+      <div id="lightbox-media"></div>
       <p id="lightbox-caption"></p>
     </div>
   </div>
 
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const overlay = document.getElementById('lightbox-overlay');
-      const overlayImg = document.getElementById('lightbox-img');
-      const overlayCaption = document.getElementById('lightbox-caption');
-
-      document.querySelectorAll('.entry-content img').forEach(function (img, index) {
-        const figureNumber = index + 1;
-
-        img.addEventListener('click', function () {
-          overlayImg.src = img.src;
-          overlayImg.alt = img.alt;
-          const captionEl = img.nextElementSibling;
-          const captionText = (captionEl && captionEl.tagName === 'EM') ? captionEl.textContent : '';
-          overlayCaption.innerHTML = captionText
-            ? '<span class="fig-number">Figure ' + figureNumber + ':</span> ' + captionText
-            : '';
-          overlay.classList.add('active');
-        });
-      });
-
-      overlay.addEventListener('click', function () {
-        overlay.classList.remove('active');
-        overlayImg.src = '';
-        overlayCaption.innerHTML = '';
-      });
-
-      document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') {
-          overlay.classList.remove('active');
-          overlayImg.src = '';
-          overlayCaption.innerHTML = '';
-        }
-      });
-    });
-  </script>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const toggleBtn = document.getElementById('theme-toggle');
-      const root = document.documentElement;
-    
-      function getCurrentTheme() {
-        const attr = root.getAttribute('data-theme');
-        if (attr) return attr;
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      }
-
-      function updateIcon() {
-        toggleBtn.textContent = getCurrentTheme() === 'dark' ? '☀' : '☾';
-      }
-      updateIcon();
-      toggleBtn.addEventListener('click', function () {
-        const next = getCurrentTheme() === 'dark' ? 'light' : 'dark';
-        root.setAttribute('data-theme', next);
-        localStorage.setItem('theme', next);
-        updateIcon();
-      });
-    });
-  </script>
+  <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/lightbox.js" defer></script>
+  <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/toggles.js" defer></script>
+  <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/svg-inject.js" defer></script>
 </body>
 
 </html>