Files
ra-h-os/app/layout.tsx
T
“BeeRad”andClaude Sonnet 4.6 bf175ad125 feat: add persistent light/dark mode toggle
- Add CSS custom property token system to globals.css (dark + light variants)
- Add anti-FOUC inline script in layout.tsx head to apply stored theme before hydration
- Create useTheme hook (src/hooks/useTheme.ts) backed by usePersistentState
- Add Sun/Moon toggle button to LeftToolbar above Settings
- Wire useTheme into ThreePanelLayout and pass theme/onThemeToggle to LeftToolbar
- Migrate hardcoded hex values to CSS vars in LeftToolbar and ThreePanelLayout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 19:32:06 +11:00

50 lines
1.4 KiB
TypeScript

import './globals.css';
import { DimensionIconsProvider } from '@/context/DimensionIconsContext';
import ExternalNavigationManager from '@/components/system/ExternalNavigationManager';
export const metadata = {
title: 'RA-H Open Source',
description: 'Local-first research workspace with a BYO-key AI orchestrator',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
var rawTheme = localStorage.getItem('ui.theme');
var theme = 'dark';
if (rawTheme !== null) {
try {
theme = JSON.parse(rawTheme) === 'light' ? 'light' : 'dark';
} catch (parseError) {
theme = rawTheme === 'light' ? 'light' : 'dark';
}
}
document.documentElement.setAttribute('data-theme', theme);
} catch (error) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
`,
}}
/>
</head>
<body>
<DimensionIconsProvider>
<ExternalNavigationManager />
{children}
</DimensionIconsProvider>
</body>
</html>
);
}