diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
index 6a0f2288f3..fee4c220d8 100644
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
@@ -24,11 +24,9 @@
  */
 :global(.react-toggle) {
   touch-action: pan-x;
-  display: inline-block;
   position: relative;
   cursor: pointer;
   user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -61,7 +59,6 @@
   top: 0px;
   bottom: 0px;
   margin: auto 0;
-  line-height: 0;
   left: 8px;
   opacity: 0;
   transition: opacity 0.25s ease;
@@ -80,7 +77,6 @@
   top: 0px;
   bottom: 0px;
   margin: auto 0;
-  line-height: 0;
   right: 10px;
   opacity: 1;
   transition: opacity 0.25s ease;
@@ -92,7 +88,6 @@
 }
 
 :global(.react-toggle-thumb) {
-  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
   position: absolute;
   top: 1px;
   left: 1px;
@@ -107,13 +102,12 @@
 :global([data-theme='dark'] .react-toggle .react-toggle-thumb),
 :global(.react-toggle--checked .react-toggle-thumb) {
   left: 27px;
-  border-color: #19ab27;
 }
 
 :global(.react-toggle--focus .react-toggle-thumb) {
-  box-shadow: 0px 0px 2px 3px #0099e0;
+  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
 }
 
 :global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
-  box-shadow: 0px 0px 5px 5px #0099e0;
+  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
 }