From 53f2425f65a6b26a94557b1d89dadbc80272da8e Mon Sep 17 00:00:00 2001
From: kmmiio99o <szymonladziak00@gmail.com>
Date: Fri, 16 Jan 2026 18:34:14 +0100
Subject: [PATCH] feat: use Checkboxes for Options menu in Themes page

---
 src/core/ui/settings/pages/Themes/index.tsx | 45 +++++++++------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/core/ui/settings/pages/Themes/index.tsx b/src/core/ui/settings/pages/Themes/index.tsx
index e7e38da..95e7092 100644
--- a/src/core/ui/settings/pages/Themes/index.tsx
+++ b/src/core/ui/settings/pages/Themes/index.tsx
@@ -19,7 +19,7 @@ import {
   BottomSheetTitleHeader,
   Button,
   TableRowGroup,
-  TableSwitchRow,
+  TableCheckboxRow,
   TableRowIcon,
 } from "@metro/common/components";
 import { View } from "react-native";
@@ -74,14 +74,12 @@ export default function Themes() {
               {/* Changed from TableRadioGroup to individual TableSwitchRow components
                   for better UX - users can now toggle options individually */}
               <TableRowGroup title="Override Theme Type">
-                <TableSwitchRow
+                <TableCheckboxRow
                   label="Auto"
                   icon={<TableRowIcon source={findAssetId("RobotIcon")} />}
-                  value={!colorsPref.type}
-                  onValueChange={(enabled: boolean) => {
-                    if (enabled) {
-                      colorsPref.type = undefined;
-                    } else {
+                  checked={!colorsPref.type}
+                  onPress={() => {
+                    if (!colorsPref.type) {
                       colorsPref.type = "dark";
                     }
                     getCurrentTheme()?.data &&
@@ -90,24 +88,24 @@ export default function Themes() {
                       });
                   }}
                 />
-                <TableSwitchRow
+                <TableCheckboxRow
                   label="Dark"
                   icon={<TableRowIcon source={findAssetId("ThemeDarkIcon")} />}
-                  value={colorsPref.type === "dark"}
-                  onValueChange={(enabled: boolean) => {
-                    colorsPref.type = enabled ? "dark" : undefined;
+                  checked={colorsPref.type === "dark"}
+                  onPress={() => {
+                    colorsPref.type = colorsPref.type === "dark" ? undefined : "dark";
                     getCurrentTheme()?.data &&
                       updateBunnyColor(getCurrentTheme()!.data!, {
                         update: true,
                       });
                   }}
                 />
-                <TableSwitchRow
+                <TableCheckboxRow
                   label="Light"
                   icon={<TableRowIcon source={findAssetId("ThemeLightIcon")} />}
-                  value={colorsPref.type === "light"}
-                  onValueChange={(enabled: boolean) => {
-                    colorsPref.type = enabled ? "light" : undefined;
+                  checked={colorsPref.type === "light"}
+                  onPress={() => {
+                    colorsPref.type = colorsPref.type === "light" ? undefined : "light";
                     getCurrentTheme()?.data &&
                       updateBunnyColor(getCurrentTheme()!.data!, {
                         update: true,
@@ -116,20 +114,13 @@ export default function Themes() {
                 />
               </TableRowGroup>
               <TableRowGroup title="Chat Background">
-                <TableSwitchRow
+                <TableCheckboxRow
                   label="Show Background"
+                  subLabel="Enable or disable themes background on chat"
                   icon={<TableRowIcon source={findAssetId("ImageIcon")} />}
-                  value={!colorsPref.customBackground}
-                  onValueChange={(enabled: boolean) => {
-                    colorsPref.customBackground = enabled ? null : "hidden";
-                  }}
-                />
-                <TableSwitchRow
-                  label="Hide Background"
-                  icon={<TableRowIcon source={findAssetId("DenyIcon")} />}
-                  value={colorsPref.customBackground === "hidden"}
-                  onValueChange={(enabled: boolean) => {
-                    colorsPref.customBackground = enabled ? "hidden" : null;
+                  checked={!colorsPref.customBackground}
+                  onPress={() => {
+                    colorsPref.customBackground = !colorsPref.customBackground ? "hidden" : null;
                   }}
                 />
               </TableRowGroup>