custom theme now saves to config and executes properly

public/js/commandline.js

@@ -589,7 +589,11 @@ $(document).ready(e => {
                 }else{
                     hideCommandLine();
                 }
-                setTheme(config.theme);
+                if (config.customTheme = true) {
+                    setCustomTheme();
+                 }else{
+                     setTheme(config.theme)
+                 }
             }
         }
     })

public/js/settings.js

@@ -67,6 +67,7 @@ function updateSettingsPage(){
     setSettingsButton('maxConfidence', config.maxConfidence);
 
     setActiveThemeButton();
+    setActiveThemeTab();
     setActiveLanguageButton();
     setActiveLayoutButton();
     setActiveFontSizeButton();
@@ -75,6 +76,7 @@ function updateSettingsPage(){
     setActiveTimerStyleButton();
 
 
+
     if (config.showKeyTips) {
         $(".pageSettings .tip").removeClass('hidden');
     } else {
@@ -89,6 +91,10 @@ function setActiveThemeButton() {
     $(`.pageSettings .section.themes .theme[theme=${config.theme}]`).addClass('active');
 }
 
+function setActiveThemeTab() {
+    config.customTheme === true ? $("[tab='custom']").click() : $("[tab='preset']").click()
+}
+
 function setActiveLayoutButton(){
     $(`.pageSettings .section.layouts .layout`).removeClass('active');
     $(`.pageSettings .section.layouts .layout[layout=${config.layout}]`).addClass('active');
@@ -445,32 +451,20 @@ $(document).on("click",".pageSettings .section.tags .tagsList .tag .removeButton
 //theme tabs & custom theme
 const colorVars = ['--bg-color', '--main-color','--caret-color', '--sub-color', '--text-color', '--error-color', '--error-extra-color']
 
-function presetColor() {
-    colorVars.forEach(e => {
-        document.documentElement.style.setProperty(e, '')
-    });
-}
-
-function customColor() {
-    colorVars.forEach(e => {
-        document.documentElement.style.setProperty(e, 'inherit')
-    });
-}
-
 $(".tab").click(e => {
     $('.tab').removeClass("active")
     var $target = $(e.currentTarget)
         $target.addClass("active")
     
         if($target.attr("tab") == "preset") {
+            setCustomTheme(false)
             $('[tabContent="custom"]').removeClass("reveal")
-            presetColor()
             setTimeout(() => {
                 $('[tabContent="preset"]').addClass("reveal")
             }, 250);
         } else {
+            setCustomTheme(true)
             $('[tabContent="preset"]').removeClass("reveal")
-            customColor();
             setTimeout(() => {
                 $('[tabContent="custom"]').addClass("reveal")
             }, 250);
@@ -478,8 +472,15 @@ $(".tab").click(e => {
 })
 
 $('.colorPicker').on('input', e => {
-    var $colorVar = $(e.currentTarget).attr('colorVar')
-    var $pickedColor = $(e.currentTarget).val();
+    let $colorVar = $(e.currentTarget).attr('colorVar')
+    let $pickedColor = $(e.currentTarget).val();
 
     document.documentElement.style.setProperty($colorVar, $pickedColor)
+    
+    config.customThemeColors[colorVars.indexOf($colorVar)] = $pickedColor
 })
+
+$('.colorPicker').on('change', e => {
+    setCustomTheme(true)
+})
+

public/js/userconfig.js

@@ -1,5 +1,7 @@
 let defaultConfig = {
     theme: 'serika_dark',
+    customTheme: 'false',
+    customThemeColors: ['#ffffff','#000000','#276891','#A1A1A1','#00000','#ff6161','#A62626'],
     showKeyTips: true,
     showLiveWpm: false,
     showTimerBar: true,
@@ -36,6 +38,7 @@ function saveConfigToCookie() {
         path: '/'
      });
     restartCount = 0;
+    console.log("config saved")
 }
 
 function saveActiveTagsToCookie(){
@@ -65,6 +68,8 @@ function loadConfigFromCookie() {
     if (newConfig && newConfig != null && newConfig != "null") {
         newConfig = JSON.parse(newConfig);
         setTheme(newConfig.theme,true);
+        setCustomTheme(newConfig.customTheme,true);
+        setCustomThemeColors(newConfig.customThemeColors,true);
         setQuickTabMode(newConfig.quickTab,true);
         setPunctuation(newConfig.punctuation,true);
         setKeyTips(newConfig.showKeyTips,true);
@@ -435,6 +440,31 @@ function setTheme(name,nosave) {
     if(!nosave) saveConfigToCookie();
 }
 
+function setCustomTheme(boolean) {
+    config.customTheme = boolean;
+    setCustomThemeColors(config.customThemeColors);
+}
+
+function setCustomThemeColors(array, nosave) {
+    config.customThemeColors = array;
+
+    if(config.customTheme === true) {
+        colorVars.forEach((e, index) => {
+            document.documentElement.style.setProperty(e, array[index])
+        });
+    } else {
+        colorVars.forEach(e => {
+            document.documentElement.style.setProperty(e, '')
+        })
+    }
+
+    setTimeout(() => {
+        updateFavicon(32,14);
+      }, 500);
+      
+    if(!nosave) saveConfigToCookie();
+}
+
 function updateFavicon(size, curveSize) {
     let maincolor, bgcolor;