Migrate themes from Recoil to next-themes

[BuddyWinte]

Primarily to migrate and allow for new themes, automatic color based on browser prefrences, etc.

This PR was tested slightly with basic page changes and whatnot.

Summary by CodeRabbit

• Refactor
  • Improved theme management system for enhanced stability and reliability across all application components.

[coderabbitai]

Warning

Review limit reached

@BuddyWinte, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 57 minutes and 35 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ad127dae-d6a4-45be-bb85-bda3c2064a46

📥 Commits

Reviewing files that changed from the base of the PR and between fa24ca3 and 4df979a.

📒 Files selected for processing (4)

• components/sidebar.tsx
• pages/_app.tsx
• pages/api/@me.ts
• pages/api/workspace/[id]/activity/users.ts

📝 Walkthrough

Walkthrough

Removes the Recoil themeState atom and localStorage-based theme persistence (state/theme.ts), adds next-themes as a dependency, wraps the app in ThemeProvider (class-based, system default), and migrates ThemeToggle, Sidebar, Topbar, and ActivityOverview to read and toggle theme via useTheme/resolvedTheme.

Changes

Recoil → next-themes migration

Layer / File(s)	Summary
Dependency addition and Recoil atom removal package.json, state/theme.ts	Adds next-themes ^0.4.6 to dependencies and deletes state/theme.ts entirely, removing the themeState Recoil atom, getInitialTheme helper, and globalThis.__recoilAtoms caching.
App-level ThemeProvider setup pages/_app.tsx	Imports ThemeProvider and useTheme from next-themes, wraps the full render tree in ThemeProvider (class attribute, defaultTheme="system", enableSystem), removes the prior ThemeHandler, and updates ColorThemeHandler to derive dark mode from resolvedTheme for the --group-theme CSS variable.
UI component migration to useTheme components/ThemeToggle.tsx, components/sidebar.tsx, components/topbar.tsx, components/profile/activityoverview.tsx	Each component replaces useRecoilValue(themeState) with useTheme() destructuring; toggle logic calls setTheme based on resolvedTheme; explicit localStorage writes are removed; sun/moon icon and "Light mode"/"Dark mode" label rendering switches to resolvedTheme.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 Hop hop, no more Recoil to hold,
The themes now flow from next-themes' mold.
resolvedTheme lights the way at night,
No localStorage needed — it's done right!
The rabbit cheers: less code, more delight! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the primary change: migrating the application's theme system from Recoil to next-themes, which is reflected across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

pages/_app.tsx (2)

56-74: ⚠️ Potential issue | 🟠 Major

Track resolvedTheme in ColorThemeHandler effect dependencies.

isDark is derived from resolvedTheme (line 58), but the effect depends on theme (line 73). In theme="system" mode, OS theme changes can update resolvedTheme without rerunning this effect, leaving --group-theme CSS variable stale.

💡 Proposed fix

-  }, [workspace, theme]);
+  }, [workspace, resolvedTheme]);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@pages/_app.tsx` around lines 56 - 74, The useEffect hook derives isDark from
resolvedTheme but only tracks theme and workspace in its dependency array. When
theme is set to "system" mode, OS theme changes update resolvedTheme without
triggering the effect to rerun, leaving the --group-theme CSS variable outdated.
Add resolvedTheme to the dependency array of the useEffect hook (currently
showing [workspace, theme]) so the effect reruns whenever resolvedTheme changes.

---

23-23: ⚠️ Potential issue | 🔴 Critical

Remove broken themeState import—module does not exist.

Line 23 imports themeState from @/state/theme, but that file does not exist. The codebase only contains state.ts (in the root), which exports loginState and workspacestate—not themeState. This import is unused in this file and will cause a module resolution failure at compile time. Remove it to unblock the build.

Proposed fix

-import { themeState } from "`@/state/theme`";

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@pages/_app.tsx` at line 23, Remove the import statement for themeState from
`@/state/theme` at the top of the file. This module does not exist in the codebase
(only state.ts exists with loginState and workspacestate exports), and the
import is unused. Deleting this entire import line will resolve the module
resolution failure at compile time.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/sidebar.tsx`:
- Around line 331-333: The toggleTheme function uses resolvedTheme to toggle the
theme, but the mobile theme toggle rendering at lines 813-814 compares against
theme instead of resolvedTheme. When theme is set to "system", the theme
variable never equals "dark" even though resolvedTheme reflects the actual
computed value, causing the mobile icon and label to display incorrect state.
Update the conditional logic at the rendering location (lines 813-814) to use
resolvedTheme instead of theme for consistent display with the toggle logic.

---

Outside diff comments:
In `@pages/_app.tsx`:
- Around line 56-74: The useEffect hook derives isDark from resolvedTheme but
only tracks theme and workspace in its dependency array. When theme is set to
"system" mode, OS theme changes update resolvedTheme without triggering the
effect to rerun, leaving the --group-theme CSS variable outdated. Add
resolvedTheme to the dependency array of the useEffect hook (currently showing
[workspace, theme]) so the effect reruns whenever resolvedTheme changes.
- Line 23: Remove the import statement for themeState from `@/state/theme` at the
top of the file. This module does not exist in the codebase (only state.ts
exists with loginState and workspacestate exports), and the import is unused.
Deleting this entire import line will resolve the module resolution failure at
compile time.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d80f7a48-4099-4a5e-9f37-2f228b3ab040

📥 Commits

Reviewing files that changed from the base of the PR and between d52991a and fa24ca3.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (7)

• components/ThemeToggle.tsx
• components/profile/activityoverview.tsx
• components/sidebar.tsx
• components/topbar.tsx
• package.json
• pages/_app.tsx
• state/theme.ts

💤 Files with no reviewable changes (1)

• state/theme.ts

[BuddyWinte]

@breadddevv Pinging you as this PR is (I believe) finished and it says your the core maintainer