Add ability to customize colors for disabled toggle

reaviz · Dec 8, 2023 · f7da300 · f7da300
1 parent 5204593
commit f7da300
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css
@@ -15,7 +15,20 @@
 
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.8;
+    opacity: var(--toggle-disabled-opacity);
+    background-color: var(--toggle-disabled-background);
+
+    .handle {
+      background-color: var(--toggle-handle-disabled-background);
+    }
+
+    &.checked {
+      background-color: var(--toggle-checked-disabled-background);
+
+      .handle {
+        background-color: var(--toggle-handle-checked-disabled-background);
+      }
+    }
   }
 
   &.small {

diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
@@ -358,7 +358,12 @@ export const darkTheme: Theme = {
       'toggle-spacing': spacings.sm,
       'toggle-handle-background': darkColors.gray['300'],
       'toggle-handle-checked-background': darkColors.gray['300'],
-      'toggle-handle-border-radius': borders.radius.lg
+      'toggle-handle-border-radius': borders.radius.lg,
+      'toggle-disabled-background': darkColors.gray['100'],
+      'toggle-handle-disabled-background': darkColors.gray['300'],
+      'toggle-checked-disabled-background': darkColors.blue['50'],
+      'toggle-handle-checked-disabled-background': darkColors.gray['300'],
+      'toggle-disabled-opacity': '0.8'
     },
     tooltip: {
       'tooltip-background': darkColors.slate['500'],