move theme toggle to own Vue app for better tab order

Relocate the light/dark toggle button out of #app1 and into a new
#app3 mount just before the back-to-top element so keyboard focus
reaches it near the end of the page instead of right after the main
nav. Replace the library logo's reactive :src binding with a plain
src plus data-light-src/data-dark-src so app1 no longer needs any
theme state; app3 now owns toggleTheme, overlay updates, logo swap,
and the OS preference listener.

groups/home/bootstrap5/home1.js

@@ -238,7 +238,6 @@ const app1 = createApp({
   },
   data() {
     return {
-      isDark: false,
       hamburger: [
         {
           link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
@@ -471,56 +470,7 @@ const app1 = createApp({
       },
     };
   },
-  methods: {
-    toggleTheme() {
-      this.isDark = !this.isDark;
-      this.applyTheme(this.isDark);
-      localStorage.setItem("kbcc-theme", this.isDark ? "dark" : "light");
-    },
-    applyTheme(isDark) {
-      if (isDark) {
-        document.body.setAttribute("data-bs-theme", "dark");
-      } else {
-        document.body.removeAttribute("data-bs-theme");
-      }
-      this.updateBackgroundOverlay(isDark);
-    },
-    updateBackgroundOverlay(isDark) {
-      var el = document.querySelector(".kbcc-background-image");
-      if (el && el.style.backgroundImage) {
-        // Extract the url() part from the existing background-image
-        var match = el.style.backgroundImage.match(/url\([^)]+\)/);
-        if (match) {
-          var overlay = isDark
-            ? "rgba(0,0,0,0.4)"
-            : "rgba(255,255,255,0.6)";
-          el.style.backgroundImage =
-            "linear-gradient(to bottom, " + overlay + " 0%, " + overlay + " 100%), " + match[0];
-        }
-      }
-    }
-  },
   mounted() {
-    // Theme initialization
-    var stored = localStorage.getItem("kbcc-theme");
-    var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-    if (stored) {
-      this.isDark = stored === "dark";
-    } else {
-      this.isDark = prefersDark;
-    }
-    this.applyTheme(this.isDark);
-
-    // Listen for OS preference changes (only applies when no manual override)
-    var self = this;
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function(e) {
-      if (!localStorage.getItem("kbcc-theme")) {
-        self.isDark = e.matches;
-        self.applyTheme(self.isDark);
-      }
-    });
-
     // Dynamic aria-expanded for hamburger menu (WCAG 4.1.2)
     const hamburger = document.getElementById('hamburger');
     const hamburgerContainer = document.getElementById('hamburger-container');
@@ -545,6 +495,58 @@ const app2 = createApp({
 });
 app2.mount("#app2");
 
+const app3 = createApp({
+  data() {
+    return {
+      isDark: false,
+    };
+  },
+  methods: {
+    toggleTheme() {
+      this.isDark = !this.isDark;
+      localStorage.setItem("kbcc-theme", this.isDark ? "dark" : "light");
+      if (this.isDark) {
+        document.body.setAttribute("data-bs-theme", "dark");
+      } else {
+        document.body.removeAttribute("data-bs-theme");
+      }
+      var bg = document.querySelector(".kbcc-background-image");
+      if (bg && bg.style.backgroundImage) {
+        var match = bg.style.backgroundImage.match(/url\([^)]+\)/);
+        if (match) {
+          var overlay = this.isDark ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.6)";
+          bg.style.backgroundImage =
+            "linear-gradient(to bottom, " + overlay + " 0%, " + overlay + " 100%), " + match[0];
+        }
+      }
+      var logo = document.getElementById("library-logo");
+      if (logo) {
+        logo.src = this.isDark ? logo.dataset.darkSrc : logo.dataset.lightSrc;
+      }
+    },
+  },
+  mounted() {
+    this.isDark = document.body.getAttribute("data-bs-theme") === "dark";
+    var logo = document.getElementById("library-logo");
+    if (logo && this.isDark) {
+      logo.src = logo.dataset.darkSrc;
+    }
+    var self = this;
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function(e) {
+      if (!localStorage.getItem("kbcc-theme")) {
+        self.isDark = e.matches;
+        if (self.isDark) {
+          document.body.setAttribute("data-bs-theme", "dark");
+        } else {
+          document.body.removeAttribute("data-bs-theme");
+        }
+        if (logo) logo.src = self.isDark ? logo.dataset.darkSrc : logo.dataset.lightSrc;
+      }
+    });
+  },
+});
+app3.mount("#app3");
+
 // Randomly set the background image for .kbcc-background-image
 (function () {
   const images = [