Vijayakanth Manoharan
012385e9e1
- Add @custom-variant dark in globals.css for class-based dark mode - Add ThemeToggle component with localStorage persistence and system preference fallback - Inject blocking inline script in layout to prevent flash on load - Apply dark: variants across all components (layout, site-nav, home-dashboard, expense-workspace, paycheck-workspace, recurring-expense-manager) and page headers - Create openspec/changes/theming-dark-mode with proposal, design, and tasks artifacts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Fraunces, Manrope } from "next/font/google";
|
|
|
|
import { SiteNav } from "@/components/site-nav";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
|
|
import "./globals.css";
|
|
|
|
const headingFont = Fraunces({
|
|
variable: "--font-heading",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const bodyFont = Manrope({
|
|
variable: "--font-body",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Monthy Tracker",
|
|
description: "Local-first monthly expense tracking with AI insights.",
|
|
};
|
|
|
|
const themeScript = `
|
|
(function() {
|
|
try {
|
|
var saved = localStorage.getItem('theme');
|
|
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (saved === 'dark' || (!saved && prefersDark)) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
`;
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html
|
|
lang="en"
|
|
className={`${headingFont.variable} ${bodyFont.variable} h-full antialiased`}
|
|
>
|
|
<head>
|
|
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
|
|
</head>
|
|
<body className="min-h-full bg-[linear-gradient(180deg,#f8f3ea_0%,#f5efe4_28%,#fbfaf7_100%)] text-stone-950 dark:bg-[linear-gradient(180deg,#1a1714_0%,#1c1a17_28%,#1e1c19_100%)] dark:text-stone-100">
|
|
<div className="mx-auto flex min-h-full w-full max-w-7xl flex-col px-4 py-6 sm:px-6 lg:px-8">
|
|
<header className="mb-10 flex flex-col gap-4 rounded-[2rem] border border-white/70 bg-white/80 px-6 py-5 shadow-[0_20px_50px_rgba(120,90,50,0.08)] backdrop-blur sm:flex-row sm:items-center sm:justify-between dark:border-stone-700/60 dark:bg-stone-900/80">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-amber-700 dark:text-amber-500">Monthy Tracker</p>
|
|
<p className="mt-2 text-lg text-stone-600 dark:text-stone-400">Track the month as it unfolds, not after it slips away.</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<SiteNav />
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
<main className="flex-1 pb-10">{children}</main>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|