- 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>
50 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|