diff --git a/src/scss/abstracts/_dark-color-scheme.scss b/src/scss/abstracts/_dark-color-scheme.scss index a5e86a24..68265f1c 100644 --- a/src/scss/abstracts/_dark-color-scheme.scss +++ b/src/scss/abstracts/_dark-color-scheme.scss @@ -26,6 +26,9 @@ --cc-toggle-on-knob-bg: var(--cc-btn-primary-color); --cc-toggle-off-knob-bg: var(--cc-btn-primary-color); + --cc-toggle-arrow-bg: var(--cc-btn-secondary-bg); + --cc-toggle-arrow-color: var(--cc-btn-secondary-color); + --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color); // yes (v tick) --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color); // no (x tick) diff --git a/src/scss/abstracts/_light-color-scheme.scss b/src/scss/abstracts/_light-color-scheme.scss index 5fba93ca..7abf8a08 100644 --- a/src/scss/abstracts/_light-color-scheme.scss +++ b/src/scss/abstracts/_light-color-scheme.scss @@ -25,6 +25,9 @@ --cc-toggle-on-knob-bg: #ffffff; --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg); + --cc-toggle-arrow-bg: var(--cc-btn-secondary-bg); + --cc-toggle-arrow-color: var(--cc-btn-secondary-color); + --cc-toggle-enabled-icon-color: var(--cc-bg); // yes (v tick) --cc-toggle-disabled-icon-color: var(--cc-bg); // no (x tick) diff --git a/src/scss/core/components/_preferences-modal.scss b/src/scss/core/components/_preferences-modal.scss index a0983776..89e652c7 100644 --- a/src/scss/core/components/_preferences-modal.scss +++ b/src/scss/core/components/_preferences-modal.scss @@ -219,14 +219,14 @@ $service-toggle-knob-icon-width: 1.7px; height: 20px; position: absolute; left: 18px; - background: var(--cc-toggle-readonly-bg); + background: var(--cc-toggle-arrow-bg); display: flex; justify-content: center; border-radius: 100%; pointer-events: none; svg { - stroke: var(--cc-btn-secondary-color); + stroke: var(--cc-toggle-arrow-color); transform: scale(.5); } }