Albert
9bf16fefaf
Implemented comprehensive dark/light mode support throughout the app: - Added ColorSchemeScript to layout for auto-detection of system preference - Updated MantineProvider to use 'auto' color scheme (respects system) - Updated theme.ts with dynamic Paper component styles based on color scheme - Created ThemeToggle component with sun/moon icons - Added toggle to desktop sidebar navigation - Created theme-specific favicons (favicon-light.svg, favicon-dark.svg) - Made ThoughtGalaxy 3D visualization theme-aware: - Dynamic node colors based on theme - Theme-aware lighting intensity - Theme-aware link colors - Theme-aware text labels - Added comprehensive Playwright tests for theme functionality - Theme preference persists via localStorage Tested manually with Playwright MCP: - ✅ Theme toggle switches between light and dark modes - ✅ Theme persists across page reloads - ✅ Both modes render correctly with appropriate colors - ✅ Icons change based on current theme (sun/moon) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Forum } from "next/font/google";
|
|
import "./globals.css";
|
|
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
|
|
import { Notifications } from "@mantine/notifications";
|
|
import "@mantine/notifications/styles.css";
|
|
import { Analytics } from "@vercel/analytics/react";
|
|
import { theme } from "./theme";
|
|
import { AppLayout } from "@/components/AppLayout";
|
|
|
|
// Forum for headings/titles
|
|
const forum = Forum({
|
|
weight: '400',
|
|
subsets: ["latin"],
|
|
variable: '--font-forum',
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Ponderants",
|
|
description: "Your AI Thought Partner",
|
|
icons: {
|
|
icon: "/logo.svg",
|
|
apple: "/logo.svg",
|
|
},
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<head>
|
|
{/* Auto-detect system preference for color scheme */}
|
|
<ColorSchemeScript defaultColorScheme="auto" />
|
|
{/* Dynamic favicons based on theme */}
|
|
<link
|
|
rel="icon"
|
|
href="/favicon-light.svg"
|
|
media="(prefers-color-scheme: light)"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
href="/favicon-dark.svg"
|
|
media="(prefers-color-scheme: dark)"
|
|
/>
|
|
{/* Load Zalando Sans from Google Fonts */}
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body className={forum.variable} suppressHydrationWarning>
|
|
<MantineProvider theme={theme} defaultColorScheme="auto">
|
|
<Notifications />
|
|
<AppLayout>{children}</AppLayout>
|
|
</MantineProvider>
|
|
<Analytics />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|