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

[kegren]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR migrates the theme management system from next-themes to better-themes, a new v1.0.0 package that appears to be a drop-in replacement. The migration also includes several improvements:

Key Changes

1. Theme Library Migration: Replaced next-themes@0.4.6 with better-themes@1.0.0 across all components

   • theme-provider.tsx: Simplified to a direct re-export from better-themes
   • theme-toggle.tsx: Updated import and replaced manual mounted state with useHydrated() from TanStack Router
   • sonner.tsx: Updated import for theme hook

2. Hydration Check Improvement: The theme toggle now uses useHydrated() from @tanstack/react-router instead of manually tracking mounted state with useEffect. This is more idiomatic for TanStack Router applications and ensures proper SSR hydration handling.

3. Test Configuration Updates:

   • Corrected test setup path from ./src/test/setup.ts to ./tests/setup.ts (aligns with actual directory structure)
   • Added Vitest coverage configuration with v8 provider
   • Added @vitest/coverage-v8 dev dependency

4. Dependency Updates: Several TanStack packages and other dependencies updated to latest versions

API Compatibility

The migration maintains full compatibility with existing usage:

• ThemeProvider props (attribute, defaultTheme, disableTransitionOnChange, enableSystem) work identically
• useTheme() hook returns the same { theme, setTheme } API
• No breaking changes to component interfaces

Issues Found

Two documentation inconsistencies where "next-themes" is still referenced instead of "better-themes":

• src/routes/index.tsx line 76 (feature description)
• README.md line 28 (features list)

These are non-critical style issues but should be corrected for consistency.

Confidence Score: 4/5

• This PR is safe to merge with minor documentation updates recommended.
• The migration from next-themes to better-themes appears well-executed with no breaking changes to functionality. The API is identical, test configuration is corrected, and the hydration check improvement using useHydrated is more idiomatic. Score of 4 (not 5) due to: (1) better-themes being a very new package at v1.0.0 with limited production usage history, and (2) two documentation references still mentioning the old library. The technical implementation is solid, but the newness of the dependency introduces slight uncertainty.
• README.md and src/routes/index.tsx need documentation updates to reference "better-themes" instead of "next-themes"

Important Files Changed

File Analysis

Filename	Score	Overview
src/components/theme-provider.tsx	4/5	Simplified to re-export ThemeProvider from better-themes. Clean change but removes type safety wrapper.
src/components/theme-toggle.tsx	4/5	Replaced manual mounted state with useHydrated from TanStack Router. More idiomatic but needs verification of useHydrated behavior.
vitest.config.ts	5/5	Updated test setup path and added coverage configuration. Correctly points to existing tests/setup.ts directory.
package.json	4/5	Replaced next-themes with better-themes v1.0.0 and added coverage tooling. Updated multiple dependencies to latest versions.

Sequence Diagram

sequenceDiagram
    participant App as Application
    participant Root as __root.tsx
    participant TP as ThemeProvider
    participant BT as better-themes
    participant TT as ThemeToggle
    participant Router as TanStack Router
    
    App->>Root: Initialize app
    Root->>TP: Mount with props<br/>(attribute, defaultTheme, etc.)
    TP->>BT: Forward props to better-themes
    BT->>BT: Initialize theme system<br/>Read from localStorage/system
    BT-->>Root: Render children with theme context
    
    Root->>TT: Render ThemeToggle
    TT->>Router: useHydrated()
    Router-->>TT: Return hydration status
    
    alt Not Hydrated
        TT-->>Root: Show disabled toggle (Sun icon)
    else Hydrated
        TT->>BT: useTheme() hook
        BT-->>TT: Return { theme, setTheme }
        TT-->>Root: Show interactive toggle
        
        Note over TT,Root: User clicks toggle
        TT->>BT: setTheme(newTheme)
        BT->>BT: Update theme in context<br/>Save to localStorage
        BT->>Root: Trigger re-render with new theme
        Root-->>App: Apply new theme class to HTML
    end

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

src/routes/index.tsx
The description text still references "next-themes" but the codebase has been migrated to "better-themes". This should be updated for consistency.

              <p className="text-muted-foreground text-sm">Seamless theme switching with better-themes</p>

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/routes/index.tsx
Line: 76:76

Comment:
The description text still references "next-themes" but the codebase has been migrated to "better-themes". This should be updated for consistency.

```suggestion
              <p className="text-muted-foreground text-sm">Seamless theme switching with better-themes</p>
```

How can I resolve this? If you propose a fix, please make it concise.

---

README.md
The README still references "next-themes" in the features section. This should be updated to reflect the migration to "better-themes".

- **🎨 Dark/Light Mode** — Theme switching with `better-themes` and CSS variables

Prompt To Fix With AI

This is a comment left during a code review.
Path: README.md
Line: 28:28

Comment:
The README still references "next-themes" in the features section. This should be updated to reflect the migration to "better-themes".

```suggestion
- **🎨 Dark/Light Mode** — Theme switching with `better-themes` and CSS variables
```

How can I resolve this? If you propose a fix, please make it concise.