Add light mode support (next-themes), JetBrains Mono font, OpenType features

- layout.tsx: ThemeProvider from next-themes, light mode DEFAULT, JetBrains_Mono font
- globals.css: font-mono pointing to correct variable, font-feature-settings cv01+ss03 on body
- next-themes package installed
- Build passes with zero errors
This commit is contained in:
Gjermund Høsøien Wiggen
2026-06-07 22:29:52 +02:00
parent 77860eb6c4
commit 87bd6997e3
4 changed files with 81 additions and 7 deletions

View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Inter, JetBrains_Mono } from "next/font/google";
import { Suspense } from "react";
import { ThemeProvider } from "next-themes";
import "./globals.css";
import { AppShell } from "@/components/app-shell";
@@ -9,6 +10,11 @@ const inter = Inter({
variable: "--font-inter",
});
const jetbrainsMono = JetBrains_Mono({
subsets: ["latin"],
variable: "--font-mono",
});
export const metadata: Metadata = {
title: "Tessera",
description: "Ticket management system",
@@ -18,13 +24,16 @@ export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className="dark">
<html lang="en" suppressHydrationWarning>
<body
className={`${inter.variable} font-sans antialiased bg-[#08090a] text-[#f7f8f8]`}
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
style={{ fontSize: "15px", lineHeight: 1.5 }}
>
<Suspense fallback={<div className="flex items-center justify-center h-screen text-[#8a8f98]">Loading...</div>}>
<AppShell>{children}</AppShell>
</Suspense>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
<Suspense fallback={<div className="flex items-center justify-center h-screen text-muted-foreground">Loading...</div>}>
<AppShell>{children}</AppShell>
</Suspense>
</ThemeProvider>
</body>
</html>
);