From ad3f4ff711f97783f3b3fa1cf00b385916644e36 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Tue, 23 Aug 2022 12:11:11 +1200
Subject: [PATCH] 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                     | 8 ++++++++
 .../ldap-custom-admin-group/ldap-custom-admin-group.html  | 2 +-
 .../components/form-components/SwitchField/Switch.tsx     | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index 6e940fd69..d81de6a5c 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/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 {
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
index fc0a09f54..fcfafe3ff 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
+++ b/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>
diff --git a/app/react/components/form-components/SwitchField/Switch.tsx b/app/react/components/form-components/SwitchField/Switch.tsx
index c5770d469..9673242bf 100644
--- a/app/react/components/form-components/SwitchField/Switch.tsx
+++ b/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} />}
     </>