diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 4db7d242d..a79f49b6b 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -35,6 +35,16 @@ export const useWebSocket = () => {
   return context;
 };
 
+// Dark mode context for reactive theme switching
+export const DarkModeContext = createContext<() => boolean>(() => false);
+export const useDarkMode = () => {
+  const context = useContext(DarkModeContext);
+  if (!context) {
+    throw new Error('useDarkMode must be used within DarkModeContext.Provider');
+  }
+  return context;
+};
+
 function App() {
   // Simple auth state
   const [isLoading, setIsLoading] = createSignal(true);
@@ -392,9 +402,10 @@ function App() {
         <ErrorBoundary>
       <Show when={enhancedStore()} fallback={<div>Initializing...</div>}>
       <WebSocketContext.Provider value={enhancedStore()!}>
-        <SecurityWarning />
-        <UpdateBanner />
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-2 font-sans">
+        <DarkModeContext.Provider value={darkMode}>
+          <SecurityWarning />
+          <UpdateBanner />
+          <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-2 font-sans">
         <div class="container w-[95%] max-w-screen-xl mx-auto">
           {/* Header */}
           <div class="header flex flex-row justify-between items-center mb-2">
@@ -606,6 +617,7 @@ function App() {
         </div>
         <ToastContainer />
         <NotificationContainer />
+        </DarkModeContext.Provider>
       </WebSocketContext.Provider>
       </Show>
     </ErrorBoundary>
diff --git a/frontend-modern/src/components/Dashboard/TagBadges.tsx b/frontend-modern/src/components/Dashboard/TagBadges.tsx
index 78bcd3892..a82508410 100644
--- a/frontend-modern/src/components/Dashboard/TagBadges.tsx
+++ b/frontend-modern/src/components/Dashboard/TagBadges.tsx
@@ -1,6 +1,7 @@
 import { Component, For, Show, createSignal } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { getTagColorWithSpecial } from '@/utils/tagColors';
+import { useDarkMode } from '@/App';
 
 interface TagBadgesProps {
   tags: string[];
@@ -12,7 +13,8 @@ interface TagBadgesProps {
 
 export const TagBadges: Component<TagBadgesProps> = (props) => {
   const maxVisible = () => props.maxVisible ?? 3;
-  const isDark = () => props.isDarkMode ?? document.documentElement.classList.contains('dark');
+  const darkModeSignal = useDarkMode();
+  const isDark = () => props.isDarkMode ?? darkModeSignal();
   
   const visibleTags = () => props.tags?.slice(0, maxVisible()) || [];
   const hiddenTags = () => props.tags?.slice(maxVisible()) || [];
@@ -26,7 +28,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
       <div class="inline-flex items-center gap-1 ml-2">
         <For each={visibleTags()}>
           {(tag) => {
-            const colors = getTagColorWithSpecial(tag, isDark());
+            const colors = () => getTagColorWithSpecial(tag, isDark());
             const isActive = () => props.activeSearch?.includes(`tags:${tag}`) || false;
             
             return (
@@ -50,7 +52,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
                 <div 
                   class="w-2 h-2 rounded-full hover:scale-150 transition-transform duration-200 ease-out cursor-pointer"
                   style={{
-                    'background-color': colors.bg,
+                    'background-color': colors().bg,
                     'box-shadow': isActive() 
                       ? isDark() 
                         ? `0 0 0 2.5px rgba(255, 255, 255, 0.9)` // White ring in dark mode when active
@@ -108,7 +110,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
             // Tooltip for individual tag
             (() => {
               const tag = hoveredTag()!;
-              const colors = getTagColorWithSpecial(tag, isDark());
+              const colors = () => getTagColorWithSpecial(tag, isDark());
               return (
                 <div 
                   class="fixed px-2 py-1 text-xs rounded shadow-lg pointer-events-none"
@@ -116,9 +118,9 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
                     left: `${tooltipPos()!.x}px`,
                     top: `${tooltipPos()!.y - 35}px`,
                     transform: 'translateX(-50%)',
-                    'background-color': colors.bg,
-                    'color': colors.text,
-                    'border': `1px solid ${colors.border}`,
+                    'background-color': colors().bg,
+                    'color': colors().text,
+                    'border': `1px solid ${colors().border}`,
                     'z-index': '999999',
                   }}
                 >