fix(toggle): fixed disabled toggle color in dark and high contrast modes. (#7518)

* fix(toggle): fixed disabled toggle color in dark and high contrast modes.

* fix(switch): fixed switch color in dark and high contrast modes.

* fix(switch): fixed switch in LDAP secion.

* fix(switch): corrected the blue color of Switch in dark and high contrast themes.

app/assets/css/bootstrap-override.css

@@ -71,6 +71,10 @@
 
 .switch input[type='checkbox']:disabled + .slider {
   background-color: var(--ui-gray-3);
+  @apply th-dark:before:bg-gray-warm-8;
+  @apply th-highcontrast:before:bg-gray-warm-8;
+  @apply th-dark:bg-gray-warm-9;
+  @apply th-highcontrast:bg-gray-warm-9;
 }
 
 .switch-values {
@@ -91,6 +95,8 @@
   background-color: var(--bg-switch-box-color);
   -webkit-transition: 0.4s;
   transition: 0.4s;
+  @apply th-dark:bg-gray-warm-9;
+  @apply th-highcontrast:bg-gray-warm-9;
 }
 
 .slider:before {
@@ -107,6 +113,8 @@
 
 input:checked + .slider {
   background-color: var(--ui-blue-8);
+  @apply th-dark:bg-blue-9;
+  @apply th-highcontrast:bg-blue-9;
 }
 
 input:focus + .slider {

app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html

@@ -109,7 +109,7 @@
     </label>
     <label class="switch ml-7 my-0" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
       <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
-      <span class="slider round"></span>
+      <span class="slider round before:content-['']"></span>
     </label>
   </div>
 </div>

app/react/components/form-components/SwitchField/Switch.tsx

@@ -49,7 +49,7 @@ export function Switch({
           disabled={disabled || limitedToBE}
           onChange={({ target: { checked } }) => onChange(checked)}
         />
-        <span className="slider round" data-cy={dataCy} />
+        <span className="slider round before:content-['']" data-cy={dataCy} />
       </label>
       {limitedToBE && <BEFeatureIndicator featureId={featureId} />}
     </>