Files
next-portfolio/src/app/layout.tsx

42 lines
1.2 KiB
TypeScript

import "reflect-metadata";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
});
export const metadata: Metadata = {
title: "Joe Monk",
description: "A portfolio page showing some of the things I've done",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>): React.JSX.Element {
return (
// Use suppress hydration warnings to add the dark theme class on client
<html className={`${inter.variable} font-sans`} lang="en" suppressHydrationWarning>
<head>
<script id="SetTheme"
dangerouslySetInnerHTML={{
__html: `
if (localStorage.theme !== 'dark' || (!('theme' in localStorage) && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}`,
}}>
</script>
</head>
<body className="min-h-screen flex flex-col bg-dracula-bg-lightest dark:bg-dracula-bg print:white max-h-screen">
{children}
</body>
</html>
);
}