From ce822e7538e158981f09617154d358fbbfbc2c46 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Fri, 4 Aug 2023 16:09:29 +0500
Subject: [PATCH] web: fix toggle colors

---
 apps/web/src/components/properties/toggle.jsx | 2 +-
 apps/web/src/dialogs/settings/index.tsx       | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/properties/toggle.jsx b/apps/web/src/components/properties/toggle.jsx
index 4101c9c9e..b7d06bb64 100644
--- a/apps/web/src/components/properties/toggle.jsx
+++ b/apps/web/src/components/properties/toggle.jsx
@@ -47,7 +47,7 @@ function Toggle(props) {
         {label}
       </Text>
       <Switch
-        sx={{ m: 0, bg: isOn ? "accent" : "icon" }}
+        sx={{ m: 0, bg: isOn ? "accent" : "icon-secondary" }}
         onClick={() => onToggle(!isOn)}
         checked={isOn}
       />
diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx
index 6b5e73c27..cccd240d4 100644
--- a/apps/web/src/dialogs/settings/index.tsx
+++ b/apps/web/src/dialogs/settings/index.tsx
@@ -462,7 +462,12 @@ function SettingItem(props: { item: Setting }) {
               case "toggle":
                 return (
                   <Switch
-                    sx={{ m: 0, background: "accent" }}
+                    sx={{
+                      m: 0,
+                      background: component.isToggled()
+                        ? "accent"
+                        : "icon-secondary"
+                    }}
                     disabled={isWorking}
                     onChange={() => workWithLoading(component.toggle)}
                     checked={component.isToggled()}