gjermund/tessera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@@ -17,6 +17,7 @@
"date-fns": "^4.4.0",
"lucide-react": "^1.17.0",
"next": "16.2.7",
"next-themes": "^0.4.6",
"react": "19.2.4",
"react-dom": "19.2.4",
"react-hook-form": "^7.77.0",

3
web/src/app/globals.css
View File

@@ -8,7 +8,7 @@
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
--font-mono: var(--font-mono);
--font-heading: var(--font-sans);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
@@ -123,6 +123,7 @@
}
body {
@apply bg-background text-foreground;
font-feature-settings: "cv01" 1, "ss03" 1;
}
html {
@apply font-sans;

21
web/src/app/layout.tsx
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>
);