NAS-125695 / 23.10.2 / Slide Toggle UI is broken once unchecked (by AlexKarpov98) (#9326)

* NAS-125695: Slide Toggle UI is broken once unchecked

(cherry picked from commit 8bb3fa5daeaaec090a5d356b8b4d804dc96ab619)

* NAS-125695: Slide Toggle UI is broken once unchecked

(cherry picked from commit e71c7c7aabbd75dbe529f5c894afd06518605abb)

---------
Co-authored-by: Oleksandr Karpov <Karpov4you@gmail.com>

src/app/services/theme/theme.constants.ts

@@ -82,7 +82,7 @@ export const allThemes: Theme[] = [
     bg2: '#282a36',
     fg1: '#efefef',
     fg2: '#cacac5',
-    'alt-bg1': 'rgba(122,122,122,0.25)',
+    'alt-bg1': 'rgba(122,122,122,0.8)',
     'alt-bg2': 'rgba(122,122,122,0.5)',
     'alt-fg1': '#f8f8f2',
     'alt-fg2': '#fafaf5',
@@ -180,7 +180,7 @@ export const allThemes: Theme[] = [
     bg2: '#073642',
     fg1: '#586e75',
     fg2: '#7f99a2',
-    'alt-bg1': 'rgba(122,122,122,0.25)',
+    'alt-bg1': 'rgba(122,122,122,0.8)',
     'alt-bg2': '#0b4f60', // '#314c54',
     'alt-fg1': '#839496',
     'alt-fg2': '#282a36',
@@ -213,7 +213,7 @@ export const allThemes: Theme[] = [
     bg2: '#303d48',
     fg1: '#aaaaaa',
     fg2: '#cccccc',
-    'alt-bg1': 'rgba(122,122,122,0.25)',
+    'alt-bg1': 'rgba(122,122,122,0.8)',
     'alt-bg2': '#6F6E6C',
     'alt-fg1': '#c1c1c1',
     'alt-fg2': '#e1e1e1',

src/assets/styles/other/_root-variables.scss

@@ -40,6 +40,17 @@
   --mdc-switch-selected-focus-track-color: var(--primary);
   --mdc-switch-selected-pressed-handle-color: var(--primary);
   --mdc-switch-selected-pressed-track-color: var(--primary);
+  --mdc-switch-selected-handle-color: var(--primary);
+  --mdc-switch-unselected-track-color: var(--alt-bg2);
+  --mdc-switch-unselected-hover-handle-color: var(--alt-bg1);
+  --mdc-switch-unselected-hover-track-color: var(--alt-bg2);
+  --mdc-switch-unselected-focus-handle-color: var(--alt-bg1);
+  --mdc-switch-unselected-focus-track-color: var(--alt-bg2);
+  --mdc-switch-unselected-pressed-handle-color: var(--alt-bg1);
+  --mdc-switch-unselected-pressed-track-color: var(--alt-bg2);
+  --mdc-switch-unselected-icon-color: var(--primary-txt);
+  --mdc-switch-selected-icon-color: var(--primary-txt);
+  --mdc-switch-handle-surface-color: var(--alt-bg1);
   --primary-txt: #fff;
   --mdc-circular-progress-active-indicator-color: var(--primary);
   --mat-mdc-radio-checked-ripple-color: var(--primary);