Implement Dark Mode Support

close vercel-labs#17 Co-Authored-By: ruru <[email protected]>
ruru-m07 · Apr 11, 2024 · 95582a8 · 95582a8
1 parent 3965598
commit 95582a8
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/components/chat-history.tsx b/components/chat-history.tsx
@@ -22,7 +22,7 @@ export async function ChatHistory({ userId }: ChatHistoryProps) {
           href="/"
           className={cn(
             buttonVariants({ variant: 'outline' }),
-            'h-10 w-full justify-start bg-zinc-50 px-4 shadow-none transition-colors hover:bg-zinc-200/40'
+            'h-10 w-full justify-start bg-secondary  px-4 shadow-none transition-colors hover:bg-zinc-200/40'
           )}
         >
           <IconPlus className="-translate-x-2 stroke-2" />

diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
@@ -50,7 +50,7 @@ export function ChatPanel({
   ]
 
   return (
-    <div className="fixed inset-x-0 bg-white/90 bottom-0 w-full duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] dark:from-10%">
+    <div className="fixed inset-x-0  bottom-0 w-full duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] dark:from-10%">
       <ButtonScrollToBottom
         isAtBottom={isAtBottom}
         scrollToBottom={scrollToBottom}
@@ -63,7 +63,7 @@ export function ChatPanel({
               <div
                 key={example.heading}
                 className={cn(
-                  'cursor-pointer bg-zinc-50 text-zinc-950 rounded-2xl p-4 sm:p-6 hover:bg-zinc-100 transition-colors',
+                  'cursor-pointer bg-secondary rounded-2xl p-4 sm:p-6 transition-colors',
                   index > 1 && 'hidden md:block'
                 )}
                 onClick={async () => {
@@ -104,7 +104,7 @@ export function ChatPanel({
                 }}
               >
                 <div className="font-medium">{example.heading}</div>
-                <div className="text-sm text-zinc-800">
+                <div className="text-sm text-muted-foreground">
                   {example.subheading}
                 </div>
               </div>

diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
@@ -3,11 +3,11 @@ import { ExternalLink } from '@/components/external-link'
 export function EmptyScreen() {
   return (
     <div className="mx-auto max-w-2xl px-4">
-      <div className="flex flex-col gap-2 rounded-2xl bg-zinc-50 sm:p-8 p-4 text-sm sm:text-base">
+      <div className="flex flex-col gap-2 rounded-2xl bg-secondary sm:p-8 p-4 text-sm sm:text-base">
         <h1 className="text-2xl sm:text-3xl tracking-tight font-semibold max-w-fit inline-block">
           Next.js Gemini Chatbot
         </h1>
-        <p className="leading-normal text-zinc-900">
+        <p className="leading-normal text-muted-foreground">
           This is an open source AI chatbot app template built with{' '}
           <ExternalLink href="https://nextjs.org">Next.js</ExternalLink>, the{' '}
           <ExternalLink href="https://sdk.vercel.ai">
@@ -19,7 +19,7 @@ export function EmptyScreen() {
           </ExternalLink>
           .
         </p>
-        <p className="leading-normal text-zinc-900">
+        <p className="leading-normal text-muted-foreground">
           It uses{' '}
           <ExternalLink href="https://vercel.com/blog/ai-sdk-3-generative-ui">
             React Server Components

diff --git a/components/prompt-form.tsx b/components/prompt-form.tsx
@@ -118,7 +118,7 @@ export function PromptForm({
           }
         }}
       />
-      <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-zinc-100 px-12 sm:rounded-full sm:px-12">
+      <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-secondary px-12 sm:rounded-full sm:px-12">
         {/* <Tooltip>
           <TooltipTrigger asChild> */}
         <Button
@@ -140,7 +140,7 @@ export function PromptForm({
           tabIndex={0}
           onKeyDown={onKeyDown}
           placeholder="Send a message."
-          className="min-h-[60px] w-full bg-transparent placeholder:text-zinc-900 resize-none px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+          className="min-h-[60px] w-full bg-transparent placeholder:text-muted-foreground resize-none px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
           autoFocus
           spellCheck={false}
           autoComplete="off"
@@ -157,7 +157,7 @@ export function PromptForm({
                 type="submit"
                 size="icon"
                 disabled={input === ''}
-                className="bg-transparent shadow-none text-zinc-950 rounded-full hover:bg-zinc-200"
+                className="bg-transparent shadow-none text-secondary-foreground rounded-full hover:bg-secondary-foreground/25"
               >
                 <IconArrowElbow />
                 <span className="sr-only">Send message</span>

diff --git a/components/providers.tsx b/components/providers.tsx
@@ -5,11 +5,19 @@ import * as React from 'react'
 import { ThemeProviderProps } from 'next-themes/dist/types'
 import { SidebarProvider } from '@/lib/hooks/use-sidebar'
 import { TooltipProvider } from '@/components/ui/tooltip'
+import { ThemeProvider } from '@/components/theme-provider'
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
-    <SidebarProvider>
-      <TooltipProvider>{children}</TooltipProvider>
-    </SidebarProvider>
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <SidebarProvider>
+        <TooltipProvider>{children}</TooltipProvider>
+      </SidebarProvider>
+    </ThemeProvider>
   )
 }
diff --git a/components/sidebar-list.tsx b/components/sidebar-list.tsx
@@ -30,7 +30,7 @@ export async function SidebarList({ userId }: SidebarListProps) {
         )}
       </div>
       <div className="flex items-center justify-between p-4">
-        {/* <ThemeToggle /> */}
+        <ThemeToggle />
         <ClearHistory clearChats={clearChats} isEnabled={chats?.length > 0} />
       </div>
     </div>

diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}