feat: dark theme

package.json

@@ -47,6 +47,7 @@
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-collapsible": "1.0.3",
     "@radix-ui/react-dialog": "1.0.5",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-label": "2.0.2",
     "@radix-ui/react-popover": "1.0.7",
@@ -74,6 +75,7 @@
     "lucide-react": "0.358.0",
     "next": "14.1.3",
     "next-axiom": "1.1.1",
+    "next-themes": "0.3.0",
     "react": "18.2.0",
     "react-chartjs-2": "5.2.0",
     "react-day-picker": "8.10.0",

src/app/_components/block.tsx

@@ -3,11 +3,15 @@ import { Children } from 'react';
 import { Separator } from '~/components/ui/separator';
 
 export function Block({ children }: { children: React.ReactNode }) {
-  return <div className="flex grow flex-col rounded-md border border-primary-200 bg-white p-2">{children}</div>;
+  return (
+    <div className="flex grow flex-col rounded-md border border-primary-200 bg-white p-2 dark:border-primary-400 dark:bg-primary-700">
+      {children}
+    </div>
+  );
 }
 
 export function BlockContainer({ children }: { children: React.ReactNode }) {
-  return <section className="flex grow flex-col bg-primary-100 p-2">{children}</section>;
+  return <section className="flex grow flex-col bg-primary-100 p-2 dark:bg-primary-600">{children}</section>;
 }
 
 export function BlockTitle({ children, href }: { href?: string; children: React.ReactNode }) {
@@ -38,15 +42,15 @@ export function BlockList({ className, children }: { className?: string; childre
       {Children.map(children, (c) => (
         <>
           {c}
-          <Separator className="last:hidden" />
+          <Separator className="last:hidden dark:bg-primary-400" />
         </>
       ))}
     </div>
   );
 }
 
 export function BlockListItem({ children }: { children: React.ReactNode }) {
-  return <div className="rounded-md p-2 lg:hover:bg-primary-900/20">{children}</div>;
+  return <div className="rounded-md p-2 lg:hover:bg-primary-900/20 dark:lg:hover:bg-primary-200/20">{children}</div>;
 }
 
 export function BlockListItemTitle({ children }: { children: React.ReactNode }) {

src/app/_components/date-display.tsx

@@ -11,10 +11,10 @@ export default function DateDisplay({ date, timezone, distance = 'inline' }: Dat
   const formattedDate = formatInTimeZone(date, timezone ?? 'Europe/Amsterdam', 'LLLL d, yyyy');
 
   return (
-    <>
+    <span className="text-primary-600 dark:text-primary-300">
       {formattedDate} {distance === 'newline' ? <br /> : null}(
       <time dateTime={formattedDate}>{getDistanceTo(date, timezone ?? 'Europe/Amsterdam').toLowerCase()}</time>)
-    </>
+    </span>
   );
 }
 

src/app/_components/footer.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export function Footer() {
   return (
-    <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t bg-white px-4 py-6 sm:flex-row md:px-6">
+    <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t border-t-primary-400 bg-white px-4 py-6 text-primary-900 dark:bg-primary-900 dark:text-primary-50 sm:flex-row md:px-6">
       <div className="flex gap-4">
         <Link className="text-xs hover:underline" href="#">
           Facebook
@@ -14,9 +14,7 @@ export function Footer() {
           Instagram
         </Link>
       </div>
-      <p className="text-xs text-gray-500 dark:text-gray-400 sm:ml-auto">
-        © {new Date().getFullYear()} Expense Tracker. All rights reserved.
-      </p>
+      <p className="text-xs sm:ml-auto">© 2024 Is it that much. All rights reserved.</p>
     </footer>
   );
 }

src/app/_components/mode-toggle.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
+import { useTheme } from 'next-themes';
+
+import { Button } from '~/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="border-primary-900 bg-primary-200 dark:border-primary-200 dark:bg-primary-900"
+        >
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="bg-white text-primary-900 dark:border dark:border-primary-400 dark:bg-primary-900 dark:text-white"
+      >
+        <DropdownMenuItem
+          className="cursor-pointer hover:bg-primary-200 dark:hover:bg-gray-200/20"
+          onClick={() => setTheme('light')}
+        >
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="cursor-pointer hover:bg-primary-200 dark:hover:bg-gray-200/20"
+          onClick={() => setTheme('dark')}
+        >
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="cursor-pointer hover:bg-primary-200 dark:hover:bg-gray-200/20"
+          onClick={() => setTheme('system')}
+        >
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/app/_components/navbar/navbar.desktop.tsx

@@ -1,4 +1,5 @@
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import { ModeToggle } from '~/app/_components/mode-toggle';
 import NavBarLink from '~/app/_components/navbar/navbar.link';
 
 export default function DesktopNavbar() {
@@ -21,6 +22,7 @@ export default function DesktopNavbar() {
           <UserButton afterSignOutUrl="/" />
         </div>
       </SignedIn>
+      <ModeToggle />
     </>
   );
 }

src/app/_components/navbar/navbar.mobile.tsx

@@ -7,6 +7,7 @@ import { Button } from '~/components/ui/button';
 import { api } from '~/trpc/server';
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
 import { AvatarIcon } from '@radix-ui/react-icons';
+import { ModeToggle } from '~/app/_components/mode-toggle';
 
 export default function MobileNavbar() {
   return (
@@ -16,12 +17,14 @@ export default function MobileNavbar() {
       </SheetTrigger>
       <SheetContent className="flex w-9/12 flex-col items-end pt-6 text-xl">
         <SignedOut>
+          <ModeToggle />
           <SheetLinkClose text={'Features'} href={'#'} />
           <SheetLinkClose text={'Pricing'} href={'#'} />
           <SheetLinkClose text={'About'} href={'#'} />
           <SheetLinkClose text={'Contact'} href={'#'} />
         </SignedOut>
         <SignedIn>
+          <ModeToggle />
           <SheetLinkClose text={'Dashboard'} href={'/dashboard'} />
           <SheetLinkClose text={'Groups'} href={'/groups'} />
           <SheetLinkClose text={'Friends'} href={'/friends'} />

src/app/_components/navbar/navbar.tsx

@@ -4,15 +4,15 @@ import MobileNavbar from '~/app/_components/navbar/navbar.mobile';
 
 export function NavBar() {
   return (
-    <header className="bg-primary-900 text-primary-50 sticky top-0 z-50 flex h-16 items-center justify-between px-4 md:justify-center">
+    <header className="sticky top-0 z-50 flex h-16 items-center justify-between border-b border-b-primary-400 bg-white px-4 text-primary-900 dark:bg-primary-900 dark:text-primary-200 md:justify-center">
       <Link className="z-10 flex items-center justify-center px-2" href="/">
         <WalletIcon className="h-6 w-6" />
         <span className="sr-only">Is It That Much?</span>
       </Link>
       <nav className="z-10 hidden items-center justify-center md:ml-auto md:mr-2 md:flex md:gap-2">
         <DesktopNavbar />
       </nav>
-      <h1 className="text-primary-100 z-10 md:hidden">
+      <h1 className="z-10 text-primary-100 md:hidden">
         <Link href="/">Is It That Much?</Link>
       </h1>
       <nav className="z-10 flex px-2 md:hidden">

src/app/_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>;
+}

src/app/dashboard/charts/bar-chart.client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Chart as ChartJS, BarElement, Tooltip, LinearScale, CategoryScale } from 'chart.js';
+import { useTheme } from 'next-themes';
 import { Bar } from 'react-chartjs-2';
 import tailwindConfig from 'tailwind.config';
 import resolveConfig from 'tailwindcss/resolveConfig';
@@ -10,8 +11,11 @@ ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip);
 type BarChartProps = Parameters<typeof Bar<number[], string | number>>[0]['data'];
 
 export default function BarChart({ labels, datasets }: BarChartProps) {
+  const { theme } = useTheme();
+
   const fullConfig = resolveConfig(tailwindConfig);
-  const backgroundColor = fullConfig.theme.colors.primary[900];
+  const color = fullConfig.theme.colors.primary[theme === 'light' ? 900 : 50];
+  const gridColor = fullConfig.theme.colors.primary[theme === 'light' ? 200 : 400];
 
   return (
     <Bar
@@ -20,6 +24,20 @@ export default function BarChart({ labels, datasets }: BarChartProps) {
           y: {
             beginAtZero: true,
             grace: 10,
+            ticks: {
+              color,
+            },
+            grid: {
+              color: gridColor,
+            },
+          },
+          x: {
+            ticks: {
+              color: color,
+            },
+            grid: {
+              color: gridColor,
+            },
           },
         },
         plugins: {
@@ -28,7 +46,7 @@ export default function BarChart({ labels, datasets }: BarChartProps) {
           },
         },
       }}
-      data={{ labels, datasets: datasets.map((d) => ({ backgroundColor, ...d })) }}
+      data={{ labels, datasets: datasets.map((d) => ({ backgroundColor: color, ...d })) }}
     />
   );
 }