diff --git a/docs/theme/ThemeExample.mdx b/docs/theme/ThemeExample.mdx
index 5c2dbab9..910beb6f 100644
--- a/docs/theme/ThemeExample.mdx
+++ b/docs/theme/ThemeExample.mdx
@@ -386,6 +386,9 @@ export const darkTheme: Theme = {
       'select-chip-icon-color': darkColors.slate['50']
     },
     toggle: {
+      'toggle-width': '55px',
+      'toggle-height': '35px',
+      'toggle-handle-size': '25px',
       'toggle-background': darkColors.gray['100'],
       'toggle-background-checked': darkColors.blue['50'],
       'toggle-border': 'none',
@@ -394,7 +397,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'],
diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css
index f1d85338..b7b4bdcf 100644
--- a/src/form/Toggle/Toggle.module.css
+++ b/src/form/Toggle/Toggle.module.css
@@ -10,7 +10,7 @@
 
   &.disabled {
     cursor: not-allowed;
-    opacity: var(--toggle-disabled-opacity);
+    opacity: var(--toggle-disabled-opacity, 0.8);
     background-color: var(--toggle-disabled-background);
 
     .handle {