From b56a90e91705462cbf939f05a43e28d53c51cb50 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Tue, 4 Oct 2022 17:19:20 +0300
Subject: [PATCH] Web: Components: ToggleButton: fixed colors for dark theme

---
 packages/components/themes/dark.js                       | 9 +++++----
 .../components/toggle-button/styled-toggle-button.js     | 8 +++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js
index 9a3114c0b0..2e1407edbb 100644
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@@ -1614,10 +1614,11 @@ const Dark = {
   },
 
   toggleButton: {
-    fillColor: grayMaxLight,
+    fillColor: "#F0F0F0",
     fillColorOff: "#292929",
 
     disableFillColor: black,
+    disableFillColorOff: "#545454",
 
     borderColor: "#474747",
     borderColorOff: "#474747",
@@ -1625,11 +1626,11 @@ const Dark = {
     disableBorderColor: "#474747",
     disableBorderColorOff: "#646464",
 
-    fillCircleColor: "#FFFFFF",
+    fillCircleColor: "#292929",
     fillCircleColorOff: grayMaxLight,
 
-    disableFillCircleColor: "#333333",
-    disableFillCircleColorOff: "#797979",
+    disableFillCircleColor: "#545454",
+    disableFillCircleColorOff: black,
   },
 
   contextMenuButton: {
diff --git a/packages/components/toggle-button/styled-toggle-button.js b/packages/components/toggle-button/styled-toggle-button.js
index 06263646d8..31bebee6e0 100644
--- a/packages/components/toggle-button/styled-toggle-button.js
+++ b/packages/components/toggle-button/styled-toggle-button.js
@@ -36,9 +36,12 @@ const ToggleButtonContainer = styled.label`
             rect {
               fill: ${props.isChecked
                 ? props.theme.toggleButton.disableFillColor
-                : props.theme.toggleButton.fillColorOff};
+                : props.theme.toggleButton.disableFillColorOff};
               stroke-width: 1px;
               stroke-linecap: round;
+              stroke: ${props.isChecked
+                ? props.theme.toggleButton.borderColor
+                : props.theme.toggleButton.borderColorOff};
             }
             circle {
               fill: ${props.isChecked
@@ -52,6 +55,9 @@ const ToggleButtonContainer = styled.label`
                 ? props.theme.toggleButton.fillColor
                 : props.theme.toggleButton.fillColorOff};
               stroke-width: 1px;
+              stroke: ${props.isChecked
+                ? props.theme.toggleButton.borderColor
+                : props.theme.toggleButton.borderColor};
             }
             circle {
               fill: ${props.isChecked