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:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user