feat: Light/dark modes

frontend/src/App.vue

@@ -44,9 +44,20 @@
 
                     <!-- Search -->
                     <div class="search-box nav-search" v-if="!isAdminRoute">
-                        <input type="text" class="form-control form-control-sm" placeholder="Search notes..." v-model="searchQuery" @keyup.enter="performSearch" />
+                        <input type="text" class="form-control" placeholder="Search notes..." v-model="searchQuery" @keyup.enter="performSearch" />
                     </div>
 
+                    <!-- Theme Toggle -->
+                    <button
+                        class="btn btn-outline-light theme-toggle"
+                        type="button"
+                        :aria-label="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+                        :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+                        @click="isDarkMode = !isDarkMode"
+                    >
+                        <i :class="isDarkMode ? 'mdi mdi-weather-sunny' : 'mdi mdi-weather-night'" aria-hidden="true"></i>
+                    </button>
+
                     <!-- User Menu -->
                     <div ref="userDropdownRef" class="dropdown nav-user-menu" v-if="currentUser" @mouseleave="showUserMenu = false">
                         <button class="btn btn-outline-light dropdown-toggle" type="button" @click="toggleUserMenu">
@@ -322,6 +333,13 @@ const shareCopied = ref(false);
 const shareCopyTimeout = ref(null);
 const noteViewMode = ref(localStorage.getItem("noteViewMode") || "grid");
 watch(noteViewMode, (val) => localStorage.setItem("noteViewMode", val));
+const isDarkMode = ref(localStorage.getItem("theme") === "dark");
+const applyTheme = (dark) => {
+    document.documentElement.setAttribute("data-bs-theme", dark ? "dark" : "light");
+    localStorage.setItem("theme", dark ? "dark" : "light");
+};
+watch(isDarkMode, applyTheme);
+applyTheme(isDarkMode.value);
 const showUnlockModal = ref(false);
 const unlockTargetNote = ref(null);
 const unlockPassword = ref("");
@@ -1191,4 +1209,21 @@ const logout = () => {
         width: 100%;
     }
 }
+
+/* Dark mode overrides */
+:root[data-bs-theme="dark"] .sidebar-header {
+    border-bottom-color: #3a3f4b;
+}
+
+:root[data-bs-theme="dark"] .breadcrumb-title {
+    color: #94a3b8;
+}
+
+:root[data-bs-theme="dark"] .breadcrumb-link {
+    color: #7aa2f7;
+}
+
+:root[data-bs-theme="dark"] .breadcrumb-separator {
+    color: #4a5568;
+}
 </style>