[cookbook] Add Modular theme colors (#93)

* Add Modular theme colors, add sass, update gitignore, simplify themetoggle component

* rerun pnpm install after rebase

Author: serenackuo

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} />
                 ) : (