+
+
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..612edb9
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,72 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+interface ThemeContextType {
+ isDarkMode: boolean;
+ toggleDarkMode: () => void;
+}
+
+const ThemeContext = createContext(undefined);
+
+function setThemeClass(isDark: boolean) {
+ if (isDark) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [isDarkMode, setIsDarkMode] = useState(() => {
+ if (typeof window === 'undefined') return false;
+
+ // Check localStorage first
+ const stored = localStorage.getItem('darkMode');
+ if (stored !== null) {
+ const isDark = stored === 'true';
+ setThemeClass(isDark);
+ return isDark;
+ }
+
+ // Then check system preference
+ const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ setThemeClass(systemPrefersDark);
+ return systemPrefersDark;
+ });
+
+ // Update theme when isDarkMode changes
+ useEffect(() => {
+ setThemeClass(isDarkMode);
+ localStorage.setItem('darkMode', String(isDarkMode));
+ }, [isDarkMode]);
+
+ // Listen for system theme changes
+ useEffect(() => {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ const handleChange = (e: MediaQueryListEvent) => {
+ if (localStorage.getItem('darkMode') === null) {
+ setIsDarkMode(e.matches);
+ }
+ };
+
+ mediaQuery.addEventListener('change', handleChange);
+ return () => mediaQuery.removeEventListener('change', handleChange);
+ }, []);
+
+ const toggleDarkMode = () => {
+ setIsDarkMode(prev => !prev);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTheme() {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
+}
diff --git a/src/pages/dashboard/Settings.tsx b/src/pages/dashboard/Settings.tsx
index 58b3a98..52c679b 100644
--- a/src/pages/dashboard/Settings.tsx
+++ b/src/pages/dashboard/Settings.tsx
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
-import { Button } from '../../components/ui/Button';
import { Card } from '../../components/ui/card';
import { Label } from '../../components/ui/label';
import { Switch } from '../../components/ui/switch';
import { Slider } from '../../components/ui/slider';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
+import { useTheme } from '../../contexts/ThemeContext';
function Settings() {
// Chat & RAG Settings
@@ -14,8 +14,7 @@ function Settings() {
const [relevanceThreshold, setRelevanceThreshold] = useState(0.8);
// UI Settings
- const [darkMode, setDarkMode] = useState(false);
- const [compactView, setCompactView] = useState(false);
+ const { isDarkMode, toggleDarkMode } = useTheme();
const [messageGrouping, setMessageGrouping] = useState(true);
// Privacy Settings
@@ -32,7 +31,7 @@ function Settings() {
-
+
Enable dark color theme