Disabled style for toggle switch

apps/showcase/doc/radiobutton/DisabledDoc.vue

@@ -21,7 +21,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <RadioButton v-model="value" :value="1" disabled />
         <RadioButton v-model="value" :value="2" disabled />
     </div>
@@ -39,7 +39,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <RadioButton v-model="value" :value="1" disabled />
         <RadioButton v-model="value" :value="2" disabled />
     </div>

packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js

@@ -90,6 +90,18 @@ const theme = ({ dt }) => `
 .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
     border-color: ${dt('toggleswitch.invalid.border.color')};
 }
+
+.p-toggleswitch.p-disabled {
+    opacity: 1;
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-slider {
+    background: ${dt('toggleswitch.disabled.background')};
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-slider:before {
+    background: ${dt('toggleswitch.handle.disabled.background')};
+}
 `;
 
 const inlineStyles = {

packages/themes/src/presets/aura/toggleswitch/index.js

@@ -19,11 +19,13 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s'
+        slideDuration: '0.2s',
+        disabledBackground: '{form.field.disabled.background}'
     },
     handle: {
         borderRadius: '50%',
-        size: '1rem'
+        size: '1rem',
+        disabledBackground: '{form.field.disabled.color}'
     },
     colorScheme: {
         light: {

packages/themes/src/presets/lara/toggleswitch/index.js

@@ -19,11 +19,13 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s'
+        slideDuration: '0.2s',
+        disabledBackground: '{form.field.disabled.background}'
     },
     handle: {
         borderRadius: '50%',
-        size: '1.25rem'
+        size: '1.25rem',
+        disabledBackground: '{form.field.disabled.color}'
     },
     colorScheme: {
         light: {

packages/themes/src/presets/nora/toggleswitch/index.js

@@ -23,7 +23,8 @@ export default {
         checkedBackground: '{primary.color}',
         checkedHoverBackground: '{primary.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.1s'
+        slideDuration: '0.1s',
+        disabledBackground: '{form.field.disabled.background}'
     },
     handle: {
         borderRadius: '50%',
@@ -31,6 +32,7 @@ export default {
         background: '{form.field.border.color}',
         hoverBackground: '{form.field.border.color}',
         checkedBackground: '{primary.contrast.color}',
-        checkedHoverBackground: '{primary.contrast.color}'
+        checkedHoverBackground: '{primary.contrast.color}',
+        disabledBackground: '{form.field.disabled.color}'
     }
 };