feat: add dark mode toggle (#529)

packages/ui/package.json

@@ -53,6 +53,7 @@
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.3",
     "@radix-ui/react-toggle": "^1.0.2",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-table": "^8.9.1",
     "class-variance-authority": "^0.6.0",

packages/ui/primitives/theme-switcher.tsx

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+import { Monitor, MoonStar, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+
+export const ThemeSwitcher = () => {
+  const { theme, setTheme } = useTheme();
+  const isMounted = useIsMounted();
+
+  return (
+    <div className="bg-muted flex items-center gap-x-1 rounded-full p-1">
+      <button
+        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
+        onClick={() => setTheme('light')}
+      >
+        {isMounted && theme === 'light' && (
+          <motion.div
+            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            layoutId="selected-theme"
+          />
+        )}
+        <Sun className="h-5 w-5" />
+      </button>
+
+      <button
+        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
+        onClick={() => setTheme('dark')}
+      >
+        {isMounted && theme === 'dark' && (
+          <motion.div
+            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            layoutId="selected-theme"
+          />
+        )}
+
+        <MoonStar className="h-5 w-5" />
+      </button>
+
+      <button
+        className="text-muted-foreground relative z-10 flex h-8 w-8 items-center justify-center rounded-full"
+        onClick={() => setTheme('system')}
+      >
+        {isMounted && theme === 'system' && (
+          <motion.div
+            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            layoutId="selected-theme"
+          />
+        )}
+        <Monitor className="h-5 w-5" />
+      </button>
+    </div>
+  );
+};