From b7592f714a67b295216a3acab941f918159b2954 Mon Sep 17 00:00:00 2001
From: ryujunghy3on <ryu@grida.co>
Date: Thu, 5 Feb 2026 20:51:01 +0900
Subject: [PATCH 1/2] Add Preferences > Theme (light/dark/system)

---
 .../playground/uxhost-menu.tsx                | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/editor/grida-canvas-hosted/playground/uxhost-menu.tsx b/editor/grida-canvas-hosted/playground/uxhost-menu.tsx
index d1fd8553e..dc7c71d32 100644
--- a/editor/grida-canvas-hosted/playground/uxhost-menu.tsx
+++ b/editor/grida-canvas-hosted/playground/uxhost-menu.tsx
@@ -43,6 +43,7 @@ import {
   SpaceEvenlyHorizontallyIcon,
   SpaceEvenlyVerticallyIcon,
 } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -244,6 +245,7 @@ export function PlaygroundMenuContent({
             settingsDialog.openDialog();
           }}
         />
+        <PreferencesMenuContent />
         <DevelopersMenuContent />
         <DropdownMenuSeparator />
         <Link href={sitemap.links.github} target="_blank">
@@ -588,6 +590,49 @@ function ViewMenuContent({
   );
 }
 
+function PreferencesMenuContent() {
+  const { theme, setTheme } = useTheme();
+  const resolvedTheme = theme ?? "system";
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger className="text-xs">
+        Preferences
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className="min-w-40">
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="text-xs">
+            Theme
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="min-w-40">
+            <DropdownMenuCheckboxItem
+              checked={resolvedTheme === "light"}
+              onSelect={() => setTheme("light")}
+              className="text-xs"
+            >
+              Light
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={resolvedTheme === "dark"}
+              onSelect={() => setTheme("dark")}
+              className="text-xs"
+            >
+              Dark
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={resolvedTheme === "system"}
+              onSelect={() => setTheme("system")}
+              className="text-xs"
+            >
+              System
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  );
+}
+
 function SettingsMenuContent({
   onOpenGeneral,
   onOpenKeybindings,

From ab908bf0df5521fed525810ea8ab27ad7a87dfd1 Mon Sep 17 00:00:00 2001
From: ryujunghy3on <ryu@grida.co>
Date: Thu, 5 Feb 2026 21:58:54 +0900
Subject: [PATCH 2/2] fix: use radio group for theme menu (a11y)

---
 .../playground/uxhost-menu.tsx                | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/editor/grida-canvas-hosted/playground/uxhost-menu.tsx b/editor/grida-canvas-hosted/playground/uxhost-menu.tsx
index dc7c71d32..8b32520a4 100644
--- a/editor/grida-canvas-hosted/playground/uxhost-menu.tsx
+++ b/editor/grida-canvas-hosted/playground/uxhost-menu.tsx
@@ -48,6 +48,8 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
@@ -605,27 +607,20 @@ function PreferencesMenuContent() {
             Theme
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent className="min-w-40">
-            <DropdownMenuCheckboxItem
-              checked={resolvedTheme === "light"}
-              onSelect={() => setTheme("light")}
-              className="text-xs"
-            >
-              Light
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-              checked={resolvedTheme === "dark"}
-              onSelect={() => setTheme("dark")}
-              className="text-xs"
+            <DropdownMenuRadioGroup
+              value={resolvedTheme}
+              onValueChange={(value) => setTheme(value)}
             >
-              Dark
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem
-              checked={resolvedTheme === "system"}
-              onSelect={() => setTheme("system")}
-              className="text-xs"
-            >
-              System
-            </DropdownMenuCheckboxItem>
+              <DropdownMenuRadioItem value="light" className="text-xs">
+                Light
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="dark" className="text-xs">
+                Dark
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="system" className="text-xs">
+                System
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
           </DropdownMenuSubContent>
         </DropdownMenuSub>
       </DropdownMenuSubContent>