candle-annotator/src/app/layout.tsx
Marko Djordjevic 0d235602af feat: implement dark/light mode with system detection
- Install and configure next-themes for theme management
- Add ThemeProvider wrapper component with suppressHydrationWarning
- Define light theme CSS variables (off-white backgrounds, green accents)
- Define dark theme CSS variables (hacker theme: terminal blacks, matrix green)
- Update scrollbar styles for both themes
- Add CRT scanline/glow effects (dark mode only)
- Create ThemeToggle component with system/light/dark cycling
- Add theme toggle to Toolbox sidebar
- Update CandleChart to apply theme-specific colors
- Chart colors update dynamically on theme change
- All components use CSS variables for theme compatibility
- FOUC prevention via next-themes inline script
2026-02-12 23:31:51 +01:00

34 lines
823 B
TypeScript

import type { Metadata } from "next";
import "./globals.css";
import { ThemeProvider } from "@/components/ThemeProvider";
export const metadata: Metadata = {
title: "Candle Annotator",
description: "Annotate candlestick charts for ML training",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body className="antialiased">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
>
{children}
</ThemeProvider>
</body>
</html>
);
}