feat: ✨ add multi-theme color support

Author: truonghungit

README.md

@@ -22,7 +22,7 @@ cd new_directory_name
 #### Install dependencies.
 
 ```bash
- pnpm install
+pnpm install
 ```
 
 #### Start the server

src/components/setting-drawer.tsx

@@ -0,0 +1,87 @@
+import { Settings } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+
+import { useTheme } from '@/hooks/use-theme';
+import type { ThemeScheme, ThemeColor } from '@/hooks/use-theme';
+
+const schemes: ThemeScheme[] = ['light', 'dark', 'system'];
+const colors: ThemeColor[] = [
+  'neutral',
+  'red',
+  'blue',
+  'green',
+  'amber',
+  'rose',
+  'purple',
+  'orange',
+  'teal',
+  'yellow',
+  'violet',
+];
+
+export function SettingDrawer() {
+  const { scheme, setScheme, color, setColor } = useTheme();
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          size='icon'
+          variant='outline'
+          aria-label='Open settings'
+          aria-describedby='config-drawer-description'
+          className='rounded-full fixed right-4 top-40 z-40'
+        >
+          <Settings aria-hidden='true' />
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='flex flex-col'>
+        <SheetHeader className='pb-0 text-start'>
+          <SheetTitle>Settings</SheetTitle>
+          <SheetDescription className='text-sm text-muted-foreground'>
+            Configure your preferences for the application.
+          </SheetDescription>
+        </SheetHeader>
+        <div className='space-y-6 overflow-y-auto px-4'>
+          <div>
+            <div className='font-semibold'>Scheme:</div>
+            <div className='mt-4 grid grid-cols-3 gap-3'>
+              {schemes.map((s) => (
+                <Button
+                  key={s}
+                  variant='outline'
+                  className='capitalize'
+                  onClick={() => setScheme(s)}
+                >
+                  {s}
+                </Button>
+              ))}
+            </div>
+          </div>
+          <div>
+            <div className='font-semibold'>Theme:</div>
+            <div className='mt-4 grid grid-cols-3 gap-3'>
+              {colors.map((c) => (
+                <Button
+                  key={c}
+                  variant='outline'
+                  onClick={() => setColor(c)}
+                >
+                  {c}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/features/(admin)/dashboard/index.tsx

@@ -1,9 +1,17 @@
+import { Button } from '@/components/ui/button';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(admin)/dashboard/')({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return <div>Hello "/(admin)/(dashboard)/"!</div>;
+  return (
+    <div>
+      <div>Hello "/(admin)/(dashboard)/"!</div>
+      <div>
+        <Button>OK nè</Button>
+      </div>
+    </div>
+  );
 }

src/hooks/use-theme.ts

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+
+export type ThemeScheme = 'light' | 'dark' | 'system';
+export type ThemeColor =
+  | 'neutral'
+  | 'blue'
+  | 'green'
+  | 'amber'
+  | 'rose'
+  | 'purple'
+  | 'orange'
+  | 'teal'
+  | 'red'
+  | 'yellow'
+  | 'violet';
+
+const THEME_SCHEME_KEY = 'theme-scheme';
+const THEME_COLOR_KEY = 'theme-color';
+
+function getSystemScheme(): ThemeScheme {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
+  return 'light';
+}
+
+export function useTheme() {
+  const [scheme, setScheme] = useState<ThemeScheme>(() => {
+    return (localStorage.getItem(THEME_SCHEME_KEY) as ThemeScheme) || 'system';
+  });
+
+  const [color, setColor] = useState<ThemeColor>(() => {
+    return (localStorage.getItem(THEME_COLOR_KEY) as ThemeColor) || 'neutral';
+  });
+
+  useEffect(() => {
+    const appliedScheme = scheme === 'system' ? getSystemScheme() : scheme;
+    document.documentElement.classList.toggle('dark', appliedScheme === 'dark');
+    document.documentElement.classList.toggle(
+      'light',
+      appliedScheme === 'light'
+    );
+    localStorage.setItem(THEME_SCHEME_KEY, scheme);
+  }, [scheme]);
+
+  useEffect(() => {
+    Array.from(document.body.classList)
+      .filter((className) => className.startsWith('theme-'))
+      .forEach((className) => {
+        document.body.classList.remove(className);
+      });
+
+    document.body.classList.add(`theme-${color}`);
+    localStorage.setItem(THEME_COLOR_KEY, color);
+  }, [color]);
+
+  return {
+    scheme,
+    setScheme,
+    color,
+    setColor,
+  };
+}

src/index.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+@import "./styles/themes.css";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {

src/layouts/classic/classic-layout.tsx

@@ -13,6 +13,7 @@ import {
   SidebarTrigger,
 } from '@/components/ui/sidebar';
 import { AppSidebar } from '../components/app-sidebar';
+import { SettingDrawer } from '@/components/setting-drawer';
 
 export default function ClassicLayout({
   children,
@@ -45,6 +46,7 @@ export default function ClassicLayout({
             </Breadcrumb>
           </div>
         </header>
+        <SettingDrawer />
         <div className='flex flex-1 flex-col gap-4 p-4 pt-0'>{children}</div>
       </SidebarInset>
     </SidebarProvider>