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()}