feat: Add comprehensive theme management with mode and color selectors, alongside new fonts.

2026-05-08 17:48:55 -04:00 · 2025-11-27 23:31:10 -05:00
parent 0809f75673
commit 10e1ca8396
6 changed files with 188 additions and 9 deletions
@@ -2,7 +2,7 @@ import "~/styles/globals.css";

 import { Analytics } from "@vercel/analytics/next";
 import { type Metadata } from "next";
-import { Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Instrument_Serif } from "next/font/google";

 import { TRPCReactProvider } from "~/trpc/react";
 import { Toaster } from "~/components/ui/sonner";
@@ -17,17 +17,34 @@ export const metadata: Metadata = {
  icons: [{ rel: "icon", url: "/favicon.ico" }],
 };

+const geistSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-geist-sans",
+  display: "swap",
+});
+
 const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
  display: "swap",
 });

+const instrumentSerif = Instrument_Serif({
+  subsets: ["latin"],
+  variable: "--font-serif",
+  display: "swap",
+  weight: "400",
+});
+
 export default function RootLayout({
  children,
 }: Readonly<{ children: React.ReactNode }>) {
  return (
-    <html suppressHydrationWarning lang="en" className={geistMono.variable}>
+    <html
+      suppressHydrationWarning
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} ${instrumentSerif.variable}`}
+    >
      <head>
        {/* Inline early animation preference script to avoid FOUC */}
        <script
@@ -40,7 +57,7 @@ export default function RootLayout({
      <body className="bg-background text-foreground relative min-h-screen overflow-x-hidden font-sans antialiased">
        <ThemeProvider
          attribute="class"
-          defaultTheme="system"
+          defaultTheme="theme-ocean"
          enableSystem
          disableTransitionOnChange
        >