modular · williamw · Oct 3, 2025 · Oct 3, 2025
diff --git a/genai-cookbook/app/cookbook/[recipe]/code/page.tsx b/genai-cookbook/app/cookbook/[recipe]/code/page.tsx
@@ -76,7 +76,7 @@ export default function RecipeCode({ params }: { params: { recipe?: string } })
                     fontSize: '0.9rem',
                     backgroundColor:
                         colorScheme === 'dark'
-                            ? 'var(--mantine-color-gray-9)'
+                            ? 'var(--mantine-color-default)'
                             : 'var(--mantine-color-gray-1)',
                 }}
             >

diff --git a/genai-cookbook/app/cookbook/[recipe]/layout.tsx b/genai-cookbook/app/cookbook/[recipe]/layout.tsx
@@ -2,7 +2,7 @@
 
 import { Flex } from '@mantine/core'
 
-import { appShellContentHeight } from '@/theme/theme'
+import { appShellContentHeight } from '@/lib/theme'
 import { Toolbar } from '@/components/Toolbar'
 import { redirect } from 'next/navigation'
 import { cookbookRoute } from '@/lib/constants'

diff --git a/genai-cookbook/app/cookbook/layout.tsx b/genai-cookbook/app/cookbook/layout.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { headerHeight, navbarWidth } from '@/theme/theme'
+import { headerHeight, navbarWidth } from '@/lib/theme'
 
 import Header from '@/components/Header'
 import Navbar from '@/components/Navbar'

diff --git a/genai-cookbook/app/layout.tsx b/genai-cookbook/app/layout.tsx
@@ -1,36 +1,27 @@
 import '@mantine/core/styles.css'
-import '@/theme/globals.scss'
+import '@/styles/globals.css'
 
 import type { Metadata } from 'next'
-import { Inter, Roboto_Mono } from 'next/font/google'
-import { ClientThemeProvider } from '@/hooks/ClientThemeProvider'
+import { MantineProvider } from '@mantine/core'
+
+import { theme } from '@/lib/theme'
 import { CookbookProvider } from '@/hooks/CookbookProvider'
 
 import recipeStore from '@/store/RecipeStore'
 
 const recipes = recipeStore.getAll() ?? []
 
-const inter = Inter({
-    subsets: ['latin'],
-    variable: '--inter',
-})
-
-const robotoMono = Roboto_Mono({
-    subsets: ['latin'],
-    variable: '--roboto',
-})
-
 export const metadata: Metadata = {
     title: 'Modular GenAI Cookbook',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
-        <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
+        <html lang="en">
             <body>
-                <ClientThemeProvider>
+                <MantineProvider defaultColorScheme="auto" theme={theme}>
                     <CookbookProvider recipes={recipes}>{children}</CookbookProvider>
-                </ClientThemeProvider>
+                </MantineProvider>
             </body>
         </html>
     )

diff --git a/genai-cookbook/components/BodyText.tsx b/genai-cookbook/components/BodyText.tsx
diff --git a/genai-cookbook/components/Header.tsx b/genai-cookbook/components/Header.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { ActionIcon, Burger, Flex, Group, Title } from '@mantine/core'
 import { IconLayoutSidebar } from '@tabler/icons-react'
 
-import { iconStroke } from '@/theme/theme'
+import { iconStroke } from '@/lib/theme'
 import { cookbookRoute } from '@/lib/constants'
 import { ThemeToggle } from './ThemeToggle'
 

diff --git a/genai-cookbook/components/Navbar.tsx b/genai-cookbook/components/Navbar.tsx
@@ -3,7 +3,7 @@ import { AppShell, Group, ScrollArea, Stack, Text } from '@mantine/core'
 import { IconChevronRight } from '@tabler/icons-react'
 import { useCookbook } from '@/hooks/useCookbook'
 import { cookbookRoute } from '@/lib/constants'
-import { iconStroke } from '@/theme/theme'
+import { iconStroke } from '@/lib/theme'
 import { useSelectedLayoutSegment } from 'next/navigation'
 
 export default function Navbar() {

diff --git a/genai-cookbook/hooks/ClientThemeProvider.tsx b/genai-cookbook/hooks/ClientThemeProvider.tsx
diff --git a/genai-cookbook/lib/theme.ts b/genai-cookbook/lib/theme.ts
@@ -0,0 +1,32 @@
+import type { MantineThemeOverride } from '@mantine/core'
+
+export const theme: MantineThemeOverride = {
+    primaryColor: 'indigo',
+    defaultRadius: 'xs',
+    fontFamily:
+        'Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji',
+}
+
+export const iconStroke = 1.2
+export const headerHeight = 40
+export const navbarWidth = 260
+
+export const appShellContentHeight = `calc(100dvh - var(--app-shell-header-offset, ${headerHeight}px) - var(--app-shell-footer-offset, 0px) - (var(--app-shell-padding, var(--mantine-spacing-md)) * 2))`
+
+export const centerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+}
+
+/**
+ * Utility to derive a height based on the App Shell content area with an extra offset.
+ * Pass a number (pixels) or a CSS length string (e.g., '2rem').
+ */
+export function appShellContentHeightWithOffset(offset?: number | string) {
+    if (!offset || offset === 0) return appShellContentHeight
+    const asCss = typeof offset === 'number' ? `${offset}px` : offset
+    return `calc(${appShellContentHeight} - ${asCss})`
+}