feat(web): geist font and dark mode

ixahmedxi · Jan 23, 2024 · 5526fec · 5526fec
1 parent f0618e1
commit 5526fec
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 26 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,9 @@
   "editor.tabSize": 2,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "eslint.rules.customizations": [
     {
       "rule": "*",

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -14,7 +14,9 @@
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
   "dependencies": {
+    "geist": "^1.2.1",
     "next": "14.1.0",
+    "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
 
-import { Inter } from 'next/font/google';
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
 
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
+import { Providers } from './providers';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -18,7 +19,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body
+        className={`${GeistSans.variable} ${GeistMono.variable} font-sans bg-zinc-50 dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50`}
+      >
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,27 +1,10 @@
+import { ThemeSwitcher } from '@/components/ThemeSwitcher';
+
 export default function Home() {
   return (
-    <main>
-      <div className="bg-primary">
-        <h1>Hello world</h1>
-      </div>
-      <select className="px-2 py-1 rounded-full">
-        <option>Option 1</option>
-        <option>Option 2</option>
-      </select>
-      <a href="/about">About</a>
-      <article className="prose lg:prose-xl">
-        <h1>Garlic bread with cheese: What the science tells us</h1>
-        <p>
-          For years parents have espoused the health benefits of eating garlic
-          bread with cheese to their children, with the food earning such an
-          iconic status in our culture that kids will often dress up as warm,
-          cheesy loaf for Halloween.
-        </p>
-        <p>
-          But a recent study shows that the celebrated appetizer may be linked
-          to a series of rabies cases springing up around the country.
-        </p>
-      </article>
+    <main className="container mx-auto">
+      <h1>Hello World</h1>
+      <ThemeSwitcher />
     </main>
   );
 }
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { type FC, type PropsWithChildren } from 'react';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export const Providers: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <NextThemesProvider attribute="class" enableSystem>
+      {children}
+    </NextThemesProvider>
+  );
+};
diff --git a/apps/web/src/components/ThemeSwitcher.tsx b/apps/web/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useTheme } from 'next-themes';
+
+export const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <select
+      className="border-zinc-300 dark:border-zinc-700 text-sm bg-zinc-200 dark:bg-zinc-800 rounded-md"
+      value={theme}
+      onChange={(e) => {
+        setTheme(e.target.value);
+      }}
+    >
+      <option value="system">System</option>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
+  );
+};
diff --git a/cspell.config.yaml b/cspell.config.yaml
@@ -16,3 +16,4 @@ words:
   - tsbuildinfo
   - turborepo
   - typecheck
+  - esbenp
diff --git a/packages/config/tailwind/src/preset.ts b/packages/config/tailwind/src/preset.ts
@@ -9,7 +9,12 @@ import { type Config } from 'tailwindcss';
 export const orbitKitTailwindPreset: Config = {
   content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)'],
+        mono: ['var(--font-geist-mono)'],
+      },
+    },
   },
   plugins: [
     animate,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml