Add Preferences > Theme (light/dark/system)

[ryujunghy3on]

Theme selection in logo dropdown — Preferences > Theme (Light, Dark, System)

Screen.Recording.2026-02-05.at.9.00.39.PM.mov

Summary by CodeRabbit

• New Features

  • Preferences menu added to the Playground with theme selection (Light, Dark, System).

• Bug Fixes

  • Fixed duplicate Preferences entries that caused the Preferences submenu to appear twice.

[vercel]

@ryujunghy3on is attempting to deploy a commit to the Grida Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Adds a Preferences submenu to the playground menu that exposes theme selection (Light, Dark, System) via next-themes. The file defines and renders a PreferencesMenuContent component — duplicated twice in the same module.

Changes

Cohort / File(s)	Summary
Preferences Theme Menu editor/grida-canvas-hosted/playground/uxhost-menu.tsx	Introduces PreferencesMenuContent and wires a Theme submenu with DropdownMenuRadioGroup/DropdownMenuRadioItem to call setTheme(value) from next-themes. Duplicate PreferencesMenuContent definition present in the file; both are rendered.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 I nibble at code, a tiny tweak so neat,
Light, dark, or system — choose the seat.
Two bunnies appear where one should roam,
Merge the twins and send them home! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and specifically describes the main change: adding a Preferences menu with Theme selection (light/dark/system options), which matches the file changes that introduce theming support integration.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
grida	Ready	Preview, Comment	Feb 5, 2026 1:05pm

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@editor/grida-canvas-hosted/playground/uxhost-menu.tsx`:
- Line 46: The theme selector currently uses DropdownMenuCheckboxItem (incorrect
for single-choice); update the component to use DropdownMenuRadioGroup and
DropdownMenuRadioItem instead: wrap the theme options in DropdownMenuRadioGroup,
provide a value bound to useTheme().theme (or the theme state) and an
onValueChange handler that calls setTheme, and replace each
DropdownMenuCheckboxItem with DropdownMenuRadioItem (preserving labels/icons).
Ensure the radio group's value/handler use the same identifiers used now
(useTheme and setTheme) so selection remains mutually exclusive and accessible.
- Around line 603-629: The Theme sub-menu uses DropdownMenuCheckboxItem for
mutually exclusive choices; replace the checkbox items with the corresponding
radio group/radio item components (e.g., DropdownMenuRadioGroup or
DropdownMenuRadioItem depending on your menu lib) so screen readers get correct
semantics; keep the same state hooks (resolvedTheme and setTheme) but wire the
radio group's value to resolvedTheme and each radio item's value to
"light"/"dark"/"system", and call setTheme(value) on selection; update
labels/className stays the same and ensure the selected radio is determined by
resolvedTheme === value.