dashboard: add dark mode

apps/dashboard/tailwind.config.js

@@ -42,6 +42,7 @@ const twColorVariants = ['50', '100', '200', '700', '800', '900'];
 
 /** @type {import('tailwindcss').Config} */
 const config = {
+  darkMode: 'class',
   safelist: [
     ...colors.flatMap((color) =>
       ['text', 'bg'].map((prefix) => `${prefix}-chart-${color}`)
@@ -53,6 +54,8 @@ const config = {
           `bg-${color}-${variant}`,
           `hover:bg-${color}-${variant}`,
           `border-${color}-${variant}`,
+          `dark:bg-${color}-${variant}`,
+          `dark:hover:bg-${color}-${variant}`,
         ];
       });
     }),
@@ -71,6 +74,19 @@ const config = {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        slate: {
+          50: 'hsl(var(--slate-50))',
+          100: 'hsl(var(--slate-100))',
+          200: 'hsl(var(--slate-200))',
+          300: 'hsl(var(--slate-300))',
+          400: 'hsl(var(--slate-400))',
+          500: 'hsl(var(--slate-500))',
+          600: 'hsl(var(--slate-600))',
+          700: 'hsl(var(--slate-700))',
+          800: 'hsl(var(--slate-800))',
+          900: 'hsl(var(--slate-900))',
+          950: 'hsl(var(--slate-950))',
+        },
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',