v2 add next theme (#1325)

* feat: add button and update css vars * feat: add theme toggle * chore: add some light theme colors * feat: make theme system backward compatible
guildxyz · Jun 27, 2024 · fc83d9c · fc83d9c
1 parent 88fae3b
commit fc83d9c
Show file tree

Hide file tree

Showing 10 changed files with 413 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@nouns/assets": "^0.4.2",
+    "@phosphor-icons/react": "^2.1.6",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@snyk/protect": "latest",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.26.3",
@@ -68,6 +71,7 @@
     "lexical": "^0.12.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "14.0.1",
+    "next-themes": "^0.3.0",
     "papaparse": "^5.4.1",
     "phosphor-react": "^1.4.1",
     "posthog-js": "^1.139.3",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,61 +8,69 @@
     --foreground: 224 71.4% 4.1%;
 
     --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
+    --card-foreground: 240 4% 16%;
 
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
 
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
+    --primary: 243, 75%, 59%;
+    --primary-foreground: 0 0% 100%;
 
     --secondary: 220 14.3% 95.9%;
     --secondary-foreground: 220.9 39.3% 11%;
 
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
+    --muted: 0 0% 100%;
+    --muted-foreground: 240 4% 46%;
 
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
+    --accent: 240 2% 35%;
+    --accent-foreground: 0 0% 92%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 20% 98%;
 
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
+    --border: 240 6% 90%;
+    --input: var(--border);
     --ring: 224 71.4% 4.1%;
-
-    --radius: 0.5rem;
   }
 
-  .dark {
-    --background: 224 71.4% 4.1%;
+  :root[data-theme="dark"] {
+    --background: 240 3.7% 15.88%;
     --foreground: 210 20% 98%;
 
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
+    --card: 240 5.26% 26.08%;
+    --card-foreground: 240 2% 58%;
 
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
+    --popover: 240 5.26% 26.08%;
+    --popover-foreground: 240 2% 58%;
 
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
+    --primary: 238.73 70% 63%;
+    --primary-foreground: 0 0% 100%;
 
     --secondary: 215 27.9% 16.9%;
     --secondary-foreground: 210 20% 98%;
 
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
+    --muted: 240 3% 13%;
+    --muted-foreground: 240 1% 42%;
 
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
+    --accent: 240 2% 35%;
+    --accent-foreground: 0 0% 92%;
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 20% 98%;
 
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --ring: 216 12.2% 83.9%;
+    --border: 240 3% 38%;
+    --input: var(--border);
+    --ring: 240 0% 45%;
+
+    --sm: 640px;
+    --md: 768px;
+    --lg: 1024px;
+    --xl: 1280px;
+  }
+
+  :root[data-theme="dark"] video,
+  :root[data-theme="dark"] img {
+    filter: brightness(0.85) contrast(1.15);
   }
 }
 
@@ -71,6 +79,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply min-h-screen bg-background font-sans text-foreground;
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,19 +1,33 @@
+import type { Metadata } from "next"
+import { ThemeProvider } from "@/components/ThemeProvider"
+import { inter, dystopian } from "fonts"
 import "./globals.css"
+import clsx from "clsx"
 
-import { cn } from "@/lib/utils"
-import { inter } from "fonts"
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export const metadata: Metadata = {
+  title: "Guildhall",
+  description:
+    "Automated membership management for the platforms your community already uses.",
+}
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
-      <body
-        className={cn(
-          "font-inter min-h-screen bg-background antialiased",
-          inter.variable
-        )}
-      >
-        {children}
+      <body className={clsx(dystopian.variable, inter.variable)}>
+        <ThemeProvider
+          attribute="data-theme"
+          storageKey="chakra-ui-color-mode"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )

diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
@@ -1,3 +1,10 @@
+import { ThemeToggle } from "../../v2/components/ThemeToggle"
+
 export default function Page() {
-  return <h1>Playground</h1>
+  return (
+    <div>
+      <h1>Playground</h1>
+      <ThemeToggle />
+    </div>
+  )
 }