import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { Providers } from '@/components/providers/Providers';
import { Navbar } from '@/components/layout/Navbar';
import { Footer } from '@/components/layout/Footer';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Pastel UI - Color Manipulation & Palette Generation',
description: 'Modern web UI for color manipulation, palette generation, and accessibility analysis',
keywords: ['color', 'palette', 'generator', 'accessibility', 'wcag', 'gradient', 'design'],
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
const theme = localStorage.getItem('theme') || 'system';
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
} catch (e) {}
})();
`,
}}
/>
</head>
<body className={inter.className}>
<Providers>
<Navbar />
{children}
<Footer />
</Providers>
</body>
</html>
);
