{VIEW_ITEMS.map((item) => (
-
diff --git a/src/components/layout/ThreePanelLayout.tsx b/src/components/layout/ThreePanelLayout.tsx
index 3968dae..1b5dea3 100644
--- a/src/components/layout/ThreePanelLayout.tsx
+++ b/src/components/layout/ThreePanelLayout.tsx
@@ -6,6 +6,7 @@ import SearchModal from '../nodes/SearchModal';
import { Node } from '@/types/database';
import { DatabaseEvent } from '@/services/events';
import { usePersistentState } from '@/hooks/usePersistentState';
+import { useTheme } from '@/hooks/useTheme';
// ChatMessage import removed - chat disabled in rah-light
// Stub type for delegation (delegation system removed in rah-light)
@@ -40,6 +41,8 @@ import QuickAddInput from '../agents/QuickAddInput';
import type { PaneType, SlotState, PaneAction } from '../panes/types';
export default function ThreePanelLayout() {
+ const [theme, toggleTheme] = useTheme();
+
// Container ref for resize calculations
const containerRef = useRef
(null);
@@ -1014,7 +1017,7 @@ export default function ThreePanelLayout() {
display: 'flex',
height: '100vh',
width: '100vw',
- background: '#0a0a0a',
+ background: 'var(--rah-bg-base)',
overflow: 'hidden'
}}
>
@@ -1032,6 +1035,8 @@ export default function ThreePanelLayout() {
openTabTypes={new Set([slotA?.type, slotB?.type].filter((t): t is PaneType => t != null))}
activeTabType={activePane === 'A' ? slotA?.type ?? null : slotB?.type ?? null}
onRefreshClick={handleRefreshAll}
+ theme={theme}
+ onThemeToggle={toggleTheme}
/>
{/* Main content area */}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..bf3490b
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from 'react';
+import { usePersistentState } from './usePersistentState';
+
+export type Theme = 'dark' | 'light';
+
+function getInitialTheme(): Theme {
+ if (typeof document === 'undefined') {
+ return 'dark';
+ }
+
+ return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+}
+
+export function useTheme(): [Theme, () => void] {
+ const [theme, setTheme] = usePersistentState('ui.theme', getInitialTheme());
+
+ useEffect(() => {
+ document.documentElement.setAttribute('data-theme', theme);
+ }, [theme]);
+
+ const toggleTheme = () => {
+ setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+ };
+
+ return [theme, toggleTheme];
+}