feat(web): theme dropdown single selection

mrevanzak · Jun 30, 2024 · cda34b9 · cda34b9
1 parent 0e80d18
commit cda34b9
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
@@ -16,7 +16,7 @@ import { useTheme } from "@tanya.in/ui/theme";
 
 export function ThemeToggle() {
   const t = useTranslations("Common.theme");
-  const { setTheme } = useTheme();
+  const { setTheme, theme } = useTheme();
 
   return (
     <Dropdown classNames={{ content: "min-w-32 bg-default-50" }}>
@@ -31,16 +31,19 @@ export function ThemeToggle() {
           </DropdownTrigger>
         </div>
       </Tooltip>
-      <DropdownMenu aria-label="Theme Toggle" variant="flat">
-        <DropdownItem key="light" onClick={() => setTheme("light")}>
-          {t("light")}
-        </DropdownItem>
-        <DropdownItem key="dark" onClick={() => setTheme("dark")}>
-          {t("dark")}
-        </DropdownItem>
-        <DropdownItem key="system" onClick={() => setTheme("system")}>
-          {t("system")}
-        </DropdownItem>
+      <DropdownMenu
+        aria-label="Theme Toggle"
+        variant="flat"
+        disallowEmptySelection
+        selectionMode="single"
+        selectedKeys={[theme ?? "system"]}
+        onSelectionChange={async (keys) => {
+          setTheme(Array.from(keys).at(0)?.toString() ?? "system");
+        }}
+      >
+        <DropdownItem key="light">{t("light")}</DropdownItem>
+        <DropdownItem key="dark">{t("dark")}</DropdownItem>
+        <DropdownItem key="system">{t("system")}</DropdownItem>
       </DropdownMenu>
     </Dropdown>
   );