feat(theme): swap next-themes for better-themes provider

README.md

@@ -25,7 +25,7 @@ Automated quality checks run on every commit:
 
 ## Modern Features
 
-- **🎨 Dark/Light Mode** — Theme switching with `next-themes` and CSS variables
+- **🎨 Dark/Light Mode** — Theme switching with `better-themes` and CSS variables
 - **⚡ Optimistic Updates** — Instant UI feedback with TanStack DB's mutation features
 - **🏊 Connection Pooling** — Efficient PostgreSQL connection management with `postgres.js`
 - **📊 Type-Safe Everything** — TanStack Query provides additional type safety on top of Drizzle

package.json

@@ -51,11 +51,11 @@
     "@tanstack/react-start": "^1.145.3",
     "@tanstack/router-plugin": "^1.145.2",
     "better-auth": "^1.4.10",
+    "better-themes": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.1",
     "lucide-react": "^0.562.0",
-    "next-themes": "^0.4.6",
     "nitro": "^3.0.1-alpha.1",
     "pg-boss": "^12.5.4",
     "postgres": "^3.4.7",
@@ -81,6 +81,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.0.16",
     "babel-plugin-react-compiler": "^1.0.0",
     "concurrently": "^9.2.1",
     "dotenv": "^17.2.3",

src/components/theme-provider.tsx

@@ -1,6 +1 @@
-import type { ThemeProviderProps } from "next-themes";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}
+export { ThemeProvider } from "better-themes";

src/components/theme-toggle.tsx

@@ -1,21 +1,17 @@
 import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useHydrated } from "@tanstack/react-router";
+import { useTheme } from "better-themes";
 import { Toggle } from "@/components/ui/toggle";
 
 type ThemeToggleProps = {
   absolute?: boolean;
 };
 
 export function ThemeToggle({ absolute = true }: ThemeToggleProps) {
+  const hydrated = useHydrated();
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
+  if (!hydrated) {
     return (
       <div className={absolute ? "absolute top-6 right-6" : ""}>
         <Toggle disabled size="sm" variant="outline">

src/components/ui/sonner.tsx

@@ -5,7 +5,7 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react"
-import { useTheme } from "next-themes"
+import { useTheme } from "better-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {

src/routes/index.tsx

@@ -73,7 +73,7 @@ function App() {
             <div className="flex flex-col items-center space-y-2 rounded-lg border p-4 text-center">
               <div className="text-2xl">🌓</div>
               <h3 className="font-medium">Dark/Light Mode</h3>
-              <p className="text-muted-foreground text-sm">Seamless theme switching with next-themes</p>
+              <p className="text-muted-foreground text-sm">Seamless theme switching with better-themes</p>
             </div>
             <div className="flex flex-col items-center space-y-2 rounded-lg border p-4 text-center">
               <div className="text-2xl">⚡</div>

vitest.config.ts

@@ -5,7 +5,12 @@ export default defineConfig({
   plugins: [tsconfigPaths()],
   test: {
     environment: "happy-dom",
-    setupFiles: ["./src/test/setup.ts"],
+    setupFiles: ["./tests/setup.ts"],
     globals: true,
+    coverage: {
+      provider: "v8",
+      include: ["src/**/*.ts", "src/**/*.tsx"],
+      exclude: ["src/routeTree.gen.ts", "src/components/ui/**"],
+    },
   },
 });