diff --git a/qortal-ui-core/src/components/qort-theme-toggle.js b/qortal-ui-core/src/components/qort-theme-toggle.js
index ba4d4e22..02833cea 100644
--- a/qortal-ui-core/src/components/qort-theme-toggle.js
+++ b/qortal-ui-core/src/components/qort-theme-toggle.js
@@ -47,8 +47,9 @@ class QortThemeToggle extends LitElement {
         height: 16px;
         top: 50%;
         transform: translateY(-50%);
+        background-color: var(--switchbackground);
+        border: 2px solid var(--switchborder);
         border-radius: 1rem;
-        background-color: var(--graylight);
         transition: all .4s ease;
       }
 
@@ -58,8 +59,8 @@ class QortThemeToggle extends LitElement {
         display: inline-block;
         position: absolute;
         top: 50%;
-        background: var(--graylight);
-        border: 2px solid var(--gray);
+        background: var(--switchbackground);
+        border: 2px solid var(--switchborder);
         border-radius: 50%;
         transition: transform 300ms ease;
       }
@@ -70,7 +71,7 @@ class QortThemeToggle extends LitElement {
 
       input:checked ~ .icon,
       :host([theme="dark"]) .icon {
-        transform: translate(calc(100% - 18px), -50%);
+        transform: translate(calc(100% - 12px), -50%);
       }
 
       .moon {
@@ -131,4 +132,4 @@ class QortThemeToggle extends LitElement {
   }
 }
 
-window.customElements.define('qort-theme-toggle', QortThemeToggle);
\ No newline at end of file
+window.customElements.define('qort-theme-toggle', QortThemeToggle);