From 8e080584c8b95ae012bc4589a56fbce307ceab64 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Sun, 20 Dec 2020 23:27:46 +0000
Subject: [PATCH] clicking the themes menu no longer automatically disables
 custom theme

---
 src/js/script.js     |  8 +++-----
 src/js/userconfig.js | 16 +++++++++++-----
 src/sass/style.scss  | 37 ++++++++++++++++++-------------------
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/js/script.js b/src/js/script.js
index ede313d9f..5049116f4 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -4421,7 +4421,6 @@ $(document.body).on("click", "#supportMeWrapper", (event) => {
     });
 });
 
-
 $(document.body).on("click", "#supportMeWrapper .button.ads", (event) => {
   currentCommands.push(commandsEnableAds);
   showCommandLine();
@@ -4440,7 +4439,6 @@ $(document.body).on("click", "#supportMeWrapper a.button", (event) => {
     });
 });
 
-
 $("#wordsInput").keypress((event) => {
   event.preventDefault();
 });
@@ -5176,9 +5174,9 @@ $(document).on("click", "#bottom .leftright .right .current-theme", (e) => {
   if (e.shiftKey) {
     togglePresetCustomTheme();
   } else {
-    if (config.customTheme) {
-      togglePresetCustomTheme();
-    }
+    // if (config.customTheme) {
+    //   togglePresetCustomTheme();
+    // }
     currentCommands.push(commandsThemes);
     showCommandLine();
   }
diff --git a/src/js/userconfig.js b/src/js/userconfig.js
index 92b1e4966..59271b3e6 100644
--- a/src/js/userconfig.js
+++ b/src/js/userconfig.js
@@ -1213,6 +1213,7 @@ function previewTheme(name, setIsPreviewingVar = true) {
   if (resultVisible && (name === "nausea" || name === "round_round_baby"))
     return;
   isPreviewingTheme = setIsPreviewingVar;
+  clearCustomTheme();
   $("#currentTheme").attr("href", `themes/${name}.css`);
   setTimeout(() => {
     refreshThemeColorObject();
@@ -1243,7 +1244,8 @@ function setTheme(name, nosave) {
     console.log("Analytics unavailable");
   }
   setCustomTheme(false, true);
-  applyCustomThemeColors();
+  clearCustomTheme();
+  // applyCustomThemeColors();
   setTimeout(() => {
     $(".keymap-key").attr("style", "");
     refreshThemeColorObject();
@@ -1300,16 +1302,14 @@ function applyCustomThemeColors() {
 
   if (config.customTheme === true) {
     $(".current-theme").text("custom");
-    previewTheme("serika_dark");
+    previewTheme("serika_dark", false);
     colorVars.forEach((e, index) => {
       document.documentElement.style.setProperty(e, array[index]);
     });
   } else {
     $(".current-theme").text(config.theme.replace("_", " "));
     previewTheme(config.theme);
-    colorVars.forEach((e) => {
-      document.documentElement.style.setProperty(e, "");
-    });
+    clearCustomTheme();
   }
   setTimeout(() => {
     refreshThemeColorObject();
@@ -1318,6 +1318,12 @@ function applyCustomThemeColors() {
   }, 500);
 }
 
+function clearCustomTheme() {
+  colorVars.forEach((e) => {
+    document.documentElement.style.setProperty(e, "");
+  });
+}
+
 function togglePresetCustomTheme() {
   if (config.customTheme) {
     setCustomTheme(false);
diff --git a/src/sass/style.scss b/src/sass/style.scss
index af2a17edf..fdf0ba27f 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -711,22 +711,22 @@ a:hover {
     gap: 2rem;
     @extend .ffscroll;
 
-    .title{
+    .title {
       font-size: 2rem;
       line-height: 2rem;
       color: var(--main-color);
     }
 
-    .text{
+    .text {
       color: var(--text-color);
     }
 
-    .buttons{
+    .buttons {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       gap: 1rem;
 
-      .button{
+      .button {
         display: block;
         width: 100%;
         height: 100%;
@@ -734,19 +734,18 @@ a:hover {
         display: grid;
         gap: 1rem;
         text-decoration: none;
-        .text{
-          transform: .25s;
+        .text {
+          transform: 0.25s;
         }
-        &:hover .text{
+        &:hover .text {
           color: var(--bg-color);
         }
-        .icon{
+        .icon {
           font-size: 5rem;
           line-height: 5rem;
         }
       }
     }
-
   }
 }
 
@@ -1316,7 +1315,7 @@ key {
   line-height: 1rem;
   font-size: 0.75rem;
   color: var(--sub-color);
-  transition: 0.25s;
+  // transition: 0.25s;
   padding: 0 5px;
 
   // margin-bottom: 2rem;
@@ -1324,9 +1323,9 @@ key {
     margin-bottom: 1rem;
   }
 
-  #supportMeButton{
-    transition: .25s;
-    &:hover{
+  #supportMeButton {
+    transition: 0.25s;
+    &:hover {
       color: var(--main-color);
       cursor: pointer;
     }
@@ -3007,9 +3006,9 @@ key {
   }
   #supportMe {
     width: 90vw !important;
-    .buttons{
-      .button{
-        .icon{
+    .buttons {
+      .button {
+        .icon {
           font-size: 3rem !important;
           line-height: 3rem !important;
         }
@@ -3072,12 +3071,12 @@ key {
 
   #supportMe {
     width: 80vw !important;
-    .buttons{
+    .buttons {
       grid-template-columns: none !important;
-      .button{
+      .button {
         grid-template-columns: auto auto;
         align-items: center;
-        .icon{
+        .icon {
           font-size: 2rem !important;
           line-height: 2rem !important;
         }