Add Modular theme colors

genai-cookbook/.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-node_modules/
+**/node_modules/
 .pnp
 .pnp.js
 .yarn/install-state.gz

genai-cookbook/apps/cookbook/app/layout.tsx

@@ -1,5 +1,5 @@
 import '@mantine/core/styles.css'
-import '@/styles/globals.css'
+import '@/styles/globals.scss'
 
 import type { Metadata } from 'next'
 import { MantineProvider } from '@mantine/core'

genai-cookbook/apps/cookbook/components/ThemeToggle.tsx

@@ -2,48 +2,24 @@
 
 import { ActionIcon, Tooltip, useMantineColorScheme } from '@mantine/core'
 import { IconMoon, IconSun } from '@tabler/icons-react'
-import { useEffect, useState } from 'react'
-
-const STORAGE_KEY = 'color-scheme'
 
 export function ThemeToggle({ stroke }: { stroke: number }): JSX.Element {
-    const { colorScheme, setColorScheme } = useMantineColorScheme()
-    const [mounted, setMounted] = useState(false)
-
-    useEffect(() => {
-        setMounted(true)
-    }, [])
-
-    useEffect(() => {
-        const root = document.documentElement
-        if (colorScheme === 'dark') {
-            root.classList.add('dark')
-        } else {
-            root.classList.remove('dark')
-        }
-
-        try {
-            localStorage.setItem(STORAGE_KEY, colorScheme)
-        } catch {}
-    }, [colorScheme])
+    const { setColorScheme, colorScheme } = useMantineColorScheme()
 
-    const toggle = (): void => {
-        setColorScheme(colorScheme === 'dark' ? 'light' : 'dark')
+    function toggleColorScheme() {
+        const result = colorScheme === 'dark' ? 'light' : 'dark'
+        return setColorScheme(result)
     }
 
     const label = colorScheme === 'dark' ? 'Switch to light' : 'Switch to dark'
 
-    if (!mounted) {
-        return (
-            <ActionIcon aria-label="Toggle theme">
-                <span style={{ opacity: 0 }}>&nbsp;</span>
-            </ActionIcon>
-        )
-    }
-
     return (
         <Tooltip label={label}>
-            <ActionIcon onClick={toggle} aria-label={label} variant="transparent">
+            <ActionIcon
+                onClick={toggleColorScheme}
+                aria-label={label}
+                variant="transparent"
+            >
                 {colorScheme === 'dark' ? (
                     <IconMoon stroke={stroke} />
                 ) : (

genai-cookbook/apps/cookbook/package.json

@@ -25,7 +25,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-syntax-highlighter": "^15.6.6",
-        "streamdown": "^1.3.0"
+        "streamdown": "^1.3.0",
+        "sass": "^1.93.2"
     },
     "devDependencies": {
         "@types/node": "^20",