diff --git a/public/index.html b/public/index.html
index 5572283a2..924979a1e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -429,19 +429,19 @@
           <div class="tabContainer">
             <div tabContent="custom" class="tabContent section customTheme">
               <label class="text">background</label>
-              <input class="input colorPicker" type="color" value="#ff0000">
+              <input class="input colorPicker" type="color" value="#ff0000" colorVar="--bg-color">
               <label class="text">main</label>
-              <input class="input colorPicker" type="color" value="#00ff00">
+              <input class="input colorPicker" type="color" value="#00ff00" colorVar="--main-color">
               <label class="text">caret</label>
-              <input class="input colorPicker" type="color" value="#ff00ff">
+              <input class="input colorPicker" type="color" value="#ff00ff" colorVar="--caret-color">
               <label class="text">sub</label>
-              <input class="input colorPicker" type="color" value="#0000ff">
+              <input class="input colorPicker" type="color" value="#0000ff" colorVar="--sub-color">
               <label class="text">text</label>
-              <input class="input colorPicker" type="color" value="#f0f000">
+              <input class="input colorPicker" type="color" value="#f0f000" colorVar="--text-color">
               <label class="text">error</label>
-              <input class="input colorPicker" type="color" value="#f000f0">
+              <input class="input colorPicker" type="color" value="#f000f0" colorVar="--error-color">
               <label class="text">extra error</label>
-              <input class="input colorPicker" type="color" value="#00f0f0">
+              <input class="input colorPicker" type="color" value="#00f0f0" colorVar="--error-extra-color">
             </div>
             <div tabContent="preset" class="tabContent buttons">
             </div>
diff --git a/public/js/settings.js b/public/js/settings.js
index 401aa3e34..13eb9917a 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -458,6 +458,11 @@ $(".tab").click(e => {
                 $('[tabContent="custom"]').addClass("reveal")
             }, 250);
         }
-        console.log($target.attr('tab'))
-    
+})
+
+$('.colorPicker').change(e => {
+    var $colorVar = $(event.currentTarget).attr('colorVar')
+    var $pickedColor = $(event.currentTarget).val();
+
+    document.documentElement.style.setProperty($colorVar, $pickedColor)
 })