diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index 9babb75..596a029 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -7,6 +7,7 @@ import { syncActiveFileTreeItem, refreshSidebarTreePreservingState } from './sid
 import { GraphViewManager } from './graph.js';
 import { DashboardConflictsWidget } from './dashboard.js';
 import { t, tr } from './i18n.js';
+import { toggleThemeMode } from './themes.js';
 // ---------------------------------------------------------------------------
 // Right Sidebar Manager
 // ---------------------------------------------------------------------------
@@ -172,8 +173,21 @@ export function applyTheme(theme) {
 }
 
 export function toggleTheme() {
-  const current = document.documentElement.getAttribute("data-theme");
-  applyTheme(current === "dark" ? "light" : "dark");
+  const newMode = toggleThemeMode();
+  // Update the theme toggle label
+  const themeLabel = document.getElementById("theme-label");
+  if (themeLabel) {
+    themeLabel.textContent = newMode === "dark" ? t('theme.dark') : t('theme.light');
+  }
+  // Update the theme toggle icon
+  const themeBtn = document.getElementById("theme-toggle");
+  if (themeBtn) {
+    const icon = themeBtn.querySelector("i");
+    if (icon) {
+      icon.setAttribute("data-lucide", newMode === "dark" ? "moon" : "sun");
+    }
+  }
+  safeCreateIcons();
 }
 
 export function initHeaderMenu() {