diff --git a/memento-note/components/note-chart.tsx b/memento-note/components/note-chart.tsx
index a7293d3..490a8eb 100644
--- a/memento-note/components/note-chart.tsx
+++ b/memento-note/components/note-chart.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useMemo, useState, useEffect } from 'react'
 import {
   BarChart, Bar, LineChart, Line, AreaChart, Area,
   PieChart, Pie, Cell, RadarChart, Radar, PolarGrid, PolarAngleAxis,
@@ -24,11 +24,34 @@ interface NoteChartProps {
   height?: number
 }
 
-const isDark = () => document.documentElement.classList.contains('dark')
+// Hook to detect dark mode without re-render loops
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(() => typeof document !== 'undefined' && document.documentElement.classList.contains('dark'))
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      setIsDark(document.documentElement.classList.contains('dark'))
+    }
+
+    // Initial check
+    checkDarkMode()
+
+    // Listen for class changes on html element
+    const observer = new MutationObserver(checkDarkMode)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return isDark
+}
 
 function NoteChart({ type, title, data, colors, showLegend, height = 250 }: NoteChartProps) {
   const chartColors = colors ?? CHART_COLORS
-  const dark = isDark()
+  const dark = useDarkMode()
 
   const ttStyle = {
     background: dark ? '#1C1C1C' : '#fff',