From 36d6398316e633c760c78f5fa38376dbd54d04c5 Mon Sep 17 00:00:00 2001 From: Miodec Date: Fri, 12 Mar 2021 17:38:43 +0000 Subject: [PATCH] exported theme colors into a module --- gulpfile.js | 1 + src/js/account.js | 85 ++++++++++------- src/js/dom-util.js | 60 ++++++++++++ src/js/global-dependencies.js | 7 +- src/js/script.js | 169 ++++++---------------------------- src/js/settings.js | 22 +++-- src/js/theme-colors.js | 27 ++++++ src/js/userconfig.js | 87 ++++++++--------- 8 files changed, 232 insertions(+), 226 deletions(-) create mode 100644 src/js/theme-colors.js diff --git a/gulpfile.js b/gulpfile.js index b467ecb79..bdb38c395 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -99,6 +99,7 @@ const refactoredSrc = [ "./src/js/custom-text.js", "./src/js/shift-tracker.js", "./src/js/test-stats.js", + "./src/js/theme-colors.js", ]; //legacy files diff --git a/src/js/account.js b/src/js/account.js index f3af1bf86..d9fb08d23 100644 --- a/src/js/account.js +++ b/src/js/account.js @@ -954,22 +954,22 @@ function updateHoverChart(filteredId) { hoverChart.data.datasets[1].data = data.raw; hoverChart.data.datasets[2].data = data.err; - hoverChart.options.scales.xAxes[0].ticks.minor.fontColor = themeColors.sub; - hoverChart.options.scales.xAxes[0].scaleLabel.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[0].ticks.minor.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[2].ticks.minor.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[0].scaleLabel.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[2].scaleLabel.fontColor = themeColors.sub; + hoverChart.options.scales.xAxes[0].ticks.minor.fontColor = ThemeColors.sub; + hoverChart.options.scales.xAxes[0].scaleLabel.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[0].ticks.minor.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[2].ticks.minor.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[0].scaleLabel.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[2].scaleLabel.fontColor = ThemeColors.sub; - hoverChart.data.datasets[0].borderColor = themeColors.main; - hoverChart.data.datasets[0].pointBackgroundColor = themeColors.main; - hoverChart.data.datasets[1].borderColor = themeColors.sub; - hoverChart.data.datasets[1].pointBackgroundColor = themeColors.sub; + hoverChart.data.datasets[0].borderColor = ThemeColors.main; + hoverChart.data.datasets[0].pointBackgroundColor = ThemeColors.main; + hoverChart.data.datasets[1].borderColor = ThemeColors.sub; + hoverChart.data.datasets[1].pointBackgroundColor = ThemeColors.sub; - hoverChart.options.annotation.annotations[0].borderColor = themeColors.sub; + hoverChart.options.annotation.annotations[0].borderColor = ThemeColors.sub; hoverChart.options.annotation.annotations[0].label.backgroundColor = - themeColors.sub; - hoverChart.options.annotation.annotations[0].label.fontColor = themeColors.bg; + ThemeColors.sub; + hoverChart.options.annotation.annotations[0].label.fontColor = ThemeColors.bg; let maxChartVal = Math.max(...[Math.max(...data.wpm), Math.max(...data.raw)]); let minChartVal = Math.min(...[Math.min(...data.wpm), Math.min(...data.raw)]); @@ -1746,11 +1746,28 @@ function refreshGlobalStats() { } } +function updateAccountLoginButton() { + if (firebase.auth().currentUser != null) { + swapElements( + $("#menu .icon-button.login"), + $("#menu .icon-button.account"), + 250 + ); + } else { + swapElements( + $("#menu .icon-button.account"), + $("#menu .icon-button.login"), + 250 + ); + } +} + let totalSecondsFiltered = 0; function refreshAccountPage() { function cont() { - refreshThemeColorObject(); + ThemeColors.update(); + updateChartColors(); refreshGlobalStats(); fillPbTables(); @@ -2102,42 +2119,42 @@ function refreshAccountPage() { activityChart.data.datasets[0].data = activityChartData_time; activityChart.data.datasets[1].data = activityChartData_avgWpm; - activityChart.options.legend.labels.fontColor = themeColors.sub; + activityChart.options.legend.labels.fontColor = ThemeColors.sub; activityChart.options.scales.xAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; activityChart.options.scales.yAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; activityChart.options.scales.yAxes[0].scaleLabel.fontColor = - themeColors.sub; - activityChart.data.datasets[0].borderColor = themeColors.main; - activityChart.data.datasets[0].backgroundColor = themeColors.main; + ThemeColors.sub; + activityChart.data.datasets[0].borderColor = ThemeColors.main; + activityChart.data.datasets[0].backgroundColor = ThemeColors.main; - activityChart.data.datasets[0].trendlineLinear.style = themeColors.sub; + activityChart.data.datasets[0].trendlineLinear.style = ThemeColors.sub; activityChart.options.scales.yAxes[1].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; activityChart.options.scales.yAxes[1].scaleLabel.fontColor = - themeColors.sub; - activityChart.data.datasets[1].borderColor = themeColors.sub; + ThemeColors.sub; + activityChart.data.datasets[1].borderColor = ThemeColors.sub; - activityChart.options.legend.labels.fontColor = themeColors.sub; + activityChart.options.legend.labels.fontColor = ThemeColors.sub; resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[0].scaleLabel.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[1].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[1].scaleLabel.fontColor = - themeColors.sub; - resultHistoryChart.data.datasets[0].borderColor = themeColors.main; - resultHistoryChart.data.datasets[1].borderColor = themeColors.sub; + ThemeColors.sub; + resultHistoryChart.data.datasets[0].borderColor = ThemeColors.main; + resultHistoryChart.data.datasets[1].borderColor = ThemeColors.sub; - resultHistoryChart.options.legend.labels.fontColor = themeColors.sub; - resultHistoryChart.data.datasets[0].trendlineLinear.style = themeColors.sub; + resultHistoryChart.options.legend.labels.fontColor = ThemeColors.sub; + resultHistoryChart.data.datasets[0].trendlineLinear.style = ThemeColors.sub; resultHistoryChart.data.datasets[0].data = chartData; resultHistoryChart.data.datasets[1].data = accChartData; diff --git a/src/js/dom-util.js b/src/js/dom-util.js index 86aed3523..631dd2332 100644 --- a/src/js/dom-util.js +++ b/src/js/dom-util.js @@ -5,3 +5,63 @@ export function showBackgroundLoader() { export function hideBackgroundLoader() { $("#backgroundLoader").stop(true, true).fadeOut(125); } + +export function swapElements( + el1, + el2, + totalDuration, + callback = function () { + return; + } +) { + if ( + (el1.hasClass("hidden") && !el2.hasClass("hidden")) || + (!el1.hasClass("hidden") && el2.hasClass("hidden")) + ) { + //one of them is hidden and the other is visible + if (el1.hasClass("hidden")) { + callback(); + return false; + } + $(el1) + .removeClass("hidden") + .css("opacity", 1) + .animate( + { + opacity: 0, + }, + totalDuration / 2, + () => { + $(el1).addClass("hidden"); + $(el2) + .removeClass("hidden") + .css("opacity", 0) + .animate( + { + opacity: 1, + }, + totalDuration / 2, + () => { + callback(); + } + ); + } + ); + } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) { + //both are hidden, only fade in the second + $(el2) + .removeClass("hidden") + .css("opacity", 0) + .animate( + { + opacity: 1, + }, + totalDuration, + () => { + callback(); + } + ); + } else { + callback(); + } +} diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index 9e2f1f553..0115198cf 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -20,7 +20,11 @@ import { db_saveLocalTagPB, } from "./db"; -import { showBackgroundLoader, hideBackgroundLoader } from "./dom-util"; +import { + showBackgroundLoader, + hideBackgroundLoader, + swapElements, +} from "./dom-util"; import * as Misc from "./misc"; import * as CloudFunctions from "./cloud-functions"; import layouts from "./layouts"; @@ -32,3 +36,4 @@ import * as Sound from "./sound"; import * as CustomText from "./custom-text"; import * as ShiftTracker from "./shift-tracker"; import * as TestStats from "./test-stats"; +import * as ThemeColors from "./theme-colors"; diff --git a/src/js/script.js b/src/js/script.js index 212fe51a4..f88568c4e 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -46,45 +46,10 @@ let numbersBeforePractise = null; /// -let themeColors = { - bg: "#323437", - main: "#e2b714", - caret: "#e2b714", - sub: "#646669", - text: "#d1d0c5", - error: "#ca4754", - errorExtra: "#7e2a33", - colorfulError: "#ca4754", - colorfulErrorExtra: "#7e2a33", -}; - -let isPreviewingTheme = false; - // let CustomText = "The quick brown fox jumps over the lazy dog".split(" "); // let CustomText.isWordRandom = false; // let CustomText.word = 1; -function refreshThemeColorObject() { - let st = getComputedStyle(document.body); - - themeColors.bg = st.getPropertyValue("--bg-color").replace(" ", ""); - themeColors.main = st.getPropertyValue("--main-color").replace(" ", ""); - themeColors.caret = st.getPropertyValue("--caret-color").replace(" ", ""); - themeColors.sub = st.getPropertyValue("--sub-color").replace(" ", ""); - themeColors.text = st.getPropertyValue("--text-color").replace(" ", ""); - themeColors.error = st.getPropertyValue("--error-color").replace(" ", ""); - themeColors.errorExtra = st - .getPropertyValue("--error-extra-color") - .replace(" ", ""); - themeColors.colorfulError = st - .getPropertyValue("--colorful-error-color") - .replace(" ", ""); - themeColors.colorfulErrorExtra = st - .getPropertyValue("--colorful-error-extra-color") - .replace(" ", ""); - updateChartColors(); -} - function copyResultToClipboard() { $(".pageTest .ssWatermark").removeClass("hidden"); $(".pageTest .buttons").addClass("hidden"); @@ -98,7 +63,7 @@ function copyResultToClipboard() { $(".pageTest .loginTip").addClass("hidden"); try { html2canvas(document.body, { - backgroundColor: themeColors.bg, + backgroundColor: ThemeColors.bg, height: sourceHeight + 50, width: sourceWidth + 50, x: sourceX - 25, @@ -1356,15 +1321,15 @@ function flashPressedKeymapKey(key, correct) { $(key) .stop(true, true) .css({ - color: themeColors.bg, - backgroundColor: themeColors.main, - borderColor: themeColors.main, + color: ThemeColors.bg, + backgroundColor: ThemeColors.main, + borderColor: ThemeColors.main, }) .animate( { - color: themeColors.sub, + color: ThemeColors.sub, backgroundColor: "transparent", - borderColor: themeColors.sub, + borderColor: ThemeColors.sub, }, 500, "easeOutExpo" @@ -1373,15 +1338,15 @@ function flashPressedKeymapKey(key, correct) { $(key) .stop(true, true) .css({ - color: themeColors.bg, - backgroundColor: themeColors.error, - borderColor: themeColors.error, + color: ThemeColors.bg, + backgroundColor: ThemeColors.error, + borderColor: ThemeColors.error, }) .animate( { - color: themeColors.sub, + color: ThemeColors.sub, backgroundColor: "transparent", - borderColor: themeColors.sub, + borderColor: ThemeColors.sub, }, 500, "easeOutExpo" @@ -1885,22 +1850,22 @@ function showResult(difficultyFailed = false) { } } - if (themeColors.main == "") { - refreshThemeColorObject(); + if (ThemeColors.main == "") { + ThemeColors.update(); } wpmOverTimeChart.options.scales.xAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; wpmOverTimeChart.options.scales.xAxes[0].scaleLabel.fontColor = - themeColors.sub; + ThemeColors.sub; wpmOverTimeChart.options.scales.yAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; wpmOverTimeChart.options.scales.yAxes[2].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; wpmOverTimeChart.options.scales.yAxes[0].scaleLabel.fontColor = - themeColors.sub; + ThemeColors.sub; wpmOverTimeChart.options.scales.yAxes[2].scaleLabel.fontColor = - themeColors.sub; + ThemeColors.sub; wpmOverTimeChart.data.labels = labels; @@ -1943,11 +1908,11 @@ function showResult(difficultyFailed = false) { ); } - wpmOverTimeChart.data.datasets[0].borderColor = themeColors.main; - wpmOverTimeChart.data.datasets[0].pointBackgroundColor = themeColors.main; + wpmOverTimeChart.data.datasets[0].borderColor = ThemeColors.main; + wpmOverTimeChart.data.datasets[0].pointBackgroundColor = ThemeColors.main; wpmOverTimeChart.data.datasets[0].data = TestStats.wpmHistory; - wpmOverTimeChart.data.datasets[1].borderColor = themeColors.sub; - wpmOverTimeChart.data.datasets[1].pointBackgroundColor = themeColors.sub; + wpmOverTimeChart.data.datasets[1].borderColor = ThemeColors.sub; + wpmOverTimeChart.data.datasets[1].pointBackgroundColor = ThemeColors.sub; wpmOverTimeChart.data.datasets[1].data = rawWpmPerSecond; let maxChartVal = Math.max( @@ -2164,15 +2129,15 @@ function showResult(difficultyFailed = false) { mode: "horizontal", scaleID: "wpm", value: lpb, - borderColor: themeColors.sub, + borderColor: ThemeColors.sub, borderWidth: 1, borderDash: [2, 2], label: { - backgroundColor: themeColors.sub, + backgroundColor: ThemeColors.sub, fontFamily: config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: themeColors.bg, + fontColor: ThemeColors.bg, xPadding: 6, yPadding: 6, cornerRadius: 3, @@ -2246,15 +2211,15 @@ function showResult(difficultyFailed = false) { mode: "horizontal", scaleID: "wpm", value: tpb, - borderColor: themeColors.sub, + borderColor: ThemeColors.sub, borderWidth: 1, borderDash: [2, 2], label: { - backgroundColor: themeColors.sub, + backgroundColor: ThemeColors.sub, fontFamily: config.fontFamily.replace(/_/g, " "), fontSize: 11, fontStyle: "normal", - fontColor: themeColors.bg, + fontColor: ThemeColors.bg, xPadding: 6, yPadding: 6, cornerRadius: 3, @@ -3384,82 +3349,6 @@ function hideLiveAcc() { ); } -function swapElements( - el1, - el2, - totalDuration, - callback = function () { - return; - } -) { - if ( - (el1.hasClass("hidden") && !el2.hasClass("hidden")) || - (!el1.hasClass("hidden") && el2.hasClass("hidden")) - ) { - //one of them is hidden and the other is visible - if (el1.hasClass("hidden")) { - callback(); - return false; - } - $(el1) - .removeClass("hidden") - .css("opacity", 1) - .animate( - { - opacity: 0, - }, - totalDuration / 2, - () => { - $(el1).addClass("hidden"); - $(el2) - .removeClass("hidden") - .css("opacity", 0) - .animate( - { - opacity: 1, - }, - totalDuration / 2, - () => { - callback(); - } - ); - } - ); - } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) { - //both are hidden, only fade in the second - $(el2) - .removeClass("hidden") - .css("opacity", 0) - .animate( - { - opacity: 1, - }, - totalDuration, - () => { - callback(); - } - ); - } else { - callback(); - } -} - -function updateAccountLoginButton() { - if (firebase.auth().currentUser != null) { - swapElements( - $("#menu .icon-button.login"), - $("#menu .icon-button.account"), - 250 - ); - } else { - swapElements( - $("#menu .icon-button.account"), - $("#menu .icon-button.login"), - 250 - ); - } -} - function accountIconLoading(truefalse) { if (truefalse) { $("#top #menu .account .icon").html( diff --git a/src/js/settings.js b/src/js/settings.js index 17e013f65..98d692bad 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -1013,27 +1013,29 @@ $(".pageSettings #loadCustomColorsFromPreset").click((e) => { }); setTimeout(() => { - refreshThemeColorObject(); + ThemeColors.update(); + updateChartColors(); + colorVars.forEach((colorName) => { let color; if (colorName === "--bg-color") { - color = themeColors.bg; + color = ThemeColors.bg; } else if (colorName === "--main-color") { - color = themeColors.main; + color = ThemeColors.main; } else if (colorName === "--sub-color") { - color = themeColors.sub; + color = ThemeColors.sub; } else if (colorName === "--caret-color") { - color = themeColors.caret; + color = ThemeColors.caret; } else if (colorName === "--text-color") { - color = themeColors.text; + color = ThemeColors.text; } else if (colorName === "--error-color") { - color = themeColors.error; + color = ThemeColors.error; } else if (colorName === "--error-extra-color") { - color = themeColors.errorExtra; + color = ThemeColors.errorExtra; } else if (colorName === "--colorful-error-color") { - color = themeColors.colorfulError; + color = ThemeColors.colorfulError; } else if (colorName === "--colorful-error-extra-color") { - color = themeColors.colorfulErrorExtra; + color = ThemeColors.colorfulErrorExtra; } $(".colorPicker #" + colorName).attr("value", color); $(".colorPicker #" + colorName).val(color); diff --git a/src/js/theme-colors.js b/src/js/theme-colors.js new file mode 100644 index 000000000..4b2904989 --- /dev/null +++ b/src/js/theme-colors.js @@ -0,0 +1,27 @@ +export let bg = "#323437"; +export let main = "#e2b714"; +export let caret = "#e2b714"; +export let sub = "#646669"; +export let text = "#d1d0c5"; +export let error = "#ca4754"; +export let errorExtra = "#7e2a33"; +export let colorfulError = "#ca4754"; +export let colorfulErrorExtra = "#7e2a33"; + +export function update() { + let st = getComputedStyle(document.body); + + bg = st.getPropertyValue("--bg-color").replace(" ", ""); + main = st.getPropertyValue("--main-color").replace(" ", ""); + caret = st.getPropertyValue("--caret-color").replace(" ", ""); + sub = st.getPropertyValue("--sub-color").replace(" ", ""); + text = st.getPropertyValue("--text-color").replace(" ", ""); + error = st.getPropertyValue("--error-color").replace(" ", ""); + errorExtra = st.getPropertyValue("--error-extra-color").replace(" ", ""); + colorfulError = st + .getPropertyValue("--colorful-error-color") + .replace(" ", ""); + colorfulErrorExtra = st + .getPropertyValue("--colorful-error-extra-color") + .replace(" ", ""); +} diff --git a/src/js/userconfig.js b/src/js/userconfig.js index 81e75b547..374ab4dd5 100644 --- a/src/js/userconfig.js +++ b/src/js/userconfig.js @@ -1065,58 +1065,58 @@ function setIndicateTypos(it, nosave) { } function updateChartColors() { - hoverChart.options.scales.xAxes[0].ticks.minor.fontColor = themeColors.sub; - hoverChart.options.scales.xAxes[0].scaleLabel.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[0].ticks.minor.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[2].ticks.minor.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[0].scaleLabel.fontColor = themeColors.sub; - hoverChart.options.scales.yAxes[2].scaleLabel.fontColor = themeColors.sub; + hoverChart.options.scales.xAxes[0].ticks.minor.fontColor = ThemeColors.sub; + hoverChart.options.scales.xAxes[0].scaleLabel.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[0].ticks.minor.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[2].ticks.minor.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[0].scaleLabel.fontColor = ThemeColors.sub; + hoverChart.options.scales.yAxes[2].scaleLabel.fontColor = ThemeColors.sub; - hoverChart.data.datasets[0].borderColor = themeColors.main; - hoverChart.data.datasets[0].pointBackgroundColor = themeColors.main; - hoverChart.data.datasets[1].borderColor = themeColors.sub; - hoverChart.data.datasets[1].pointBackgroundColor = themeColors.sub; + hoverChart.data.datasets[0].borderColor = ThemeColors.main; + hoverChart.data.datasets[0].pointBackgroundColor = ThemeColors.main; + hoverChart.data.datasets[1].borderColor = ThemeColors.sub; + hoverChart.data.datasets[1].pointBackgroundColor = ThemeColors.sub; - hoverChart.options.annotation.annotations[0].borderColor = themeColors.sub; + hoverChart.options.annotation.annotations[0].borderColor = ThemeColors.sub; hoverChart.options.annotation.annotations[0].label.backgroundColor = - themeColors.sub; - hoverChart.options.annotation.annotations[0].label.fontColor = themeColors.bg; + ThemeColors.sub; + hoverChart.options.annotation.annotations[0].label.fontColor = ThemeColors.bg; - activityChart.options.legend.labels.fontColor = themeColors.sub; + activityChart.options.legend.labels.fontColor = ThemeColors.sub; - activityChart.options.scales.xAxes[0].ticks.minor.fontColor = themeColors.sub; - activityChart.options.scales.yAxes[0].ticks.minor.fontColor = themeColors.sub; - activityChart.options.scales.yAxes[0].scaleLabel.fontColor = themeColors.sub; - activityChart.data.datasets[0].borderColor = themeColors.main; - activityChart.data.datasets[0].backgroundColor = themeColors.main; + activityChart.options.scales.xAxes[0].ticks.minor.fontColor = ThemeColors.sub; + activityChart.options.scales.yAxes[0].ticks.minor.fontColor = ThemeColors.sub; + activityChart.options.scales.yAxes[0].scaleLabel.fontColor = ThemeColors.sub; + activityChart.data.datasets[0].borderColor = ThemeColors.main; + activityChart.data.datasets[0].backgroundColor = ThemeColors.main; - activityChart.data.datasets[0].trendlineLinear.style = themeColors.sub; + activityChart.data.datasets[0].trendlineLinear.style = ThemeColors.sub; - activityChart.options.scales.yAxes[1].ticks.minor.fontColor = themeColors.sub; - activityChart.options.scales.yAxes[1].scaleLabel.fontColor = themeColors.sub; - activityChart.data.datasets[1].borderColor = themeColors.sub; + activityChart.options.scales.yAxes[1].ticks.minor.fontColor = ThemeColors.sub; + activityChart.options.scales.yAxes[1].scaleLabel.fontColor = ThemeColors.sub; + activityChart.data.datasets[1].borderColor = ThemeColors.sub; - activityChart.options.legend.labels.fontColor = themeColors.sub; + activityChart.options.legend.labels.fontColor = ThemeColors.sub; resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[0].scaleLabel.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[1].ticks.minor.fontColor = - themeColors.sub; + ThemeColors.sub; resultHistoryChart.options.scales.yAxes[1].scaleLabel.fontColor = - themeColors.sub; - resultHistoryChart.data.datasets[0].borderColor = themeColors.main; - resultHistoryChart.data.datasets[1].borderColor = themeColors.sub; + ThemeColors.sub; + resultHistoryChart.data.datasets[0].borderColor = ThemeColors.main; + resultHistoryChart.data.datasets[1].borderColor = ThemeColors.sub; - resultHistoryChart.options.legend.labels.fontColor = themeColors.sub; - resultHistoryChart.data.datasets[0].trendlineLinear.style = themeColors.sub; - wpmOverTimeChart.data.datasets[0].borderColor = themeColors.main; - wpmOverTimeChart.data.datasets[0].pointBackgroundColor = themeColors.main; - wpmOverTimeChart.data.datasets[1].borderColor = themeColors.sub; - wpmOverTimeChart.data.datasets[1].pointBackgroundColor = themeColors.sub; + resultHistoryChart.options.legend.labels.fontColor = ThemeColors.sub; + resultHistoryChart.data.datasets[0].trendlineLinear.style = ThemeColors.sub; + wpmOverTimeChart.data.datasets[0].borderColor = ThemeColors.main; + wpmOverTimeChart.data.datasets[0].pointBackgroundColor = ThemeColors.main; + wpmOverTimeChart.data.datasets[1].borderColor = ThemeColors.sub; + wpmOverTimeChart.data.datasets[1].pointBackgroundColor = ThemeColors.sub; hoverChart.update(); wpmOverTimeChart.update(); @@ -1124,6 +1124,7 @@ function updateChartColors() { activityChart.update(); } +let isPreviewingTheme = false; function previewTheme(name, setIsPreviewingVar = true) { if ( (testActive || resultVisible) && @@ -1136,7 +1137,8 @@ function previewTheme(name, setIsPreviewingVar = true) { clearCustomTheme(); $("#currentTheme").attr("href", `themes/${name}.css`); setTimeout(() => { - refreshThemeColorObject(); + ThemeColors.update(); + updateChartColors(); }, 500); } @@ -1168,8 +1170,10 @@ function setTheme(name, nosave) { // applyCustomThemeColors(); setTimeout(() => { $(".keymap-key").attr("style", ""); - refreshThemeColorObject(); - $("#metaThemeColor").attr("content", themeColors.main); + ThemeColors.update(); + updateChartColors(); + + $("#metaThemeColor").attr("content", ThemeColors.main); }, 500); if (!nosave) saveConfigToCookie(); } @@ -1232,7 +1236,8 @@ function applyCustomThemeColors() { clearCustomTheme(); } setTimeout(() => { - refreshThemeColorObject(); + ThemeColors.update(); + updateChartColors(); updateFavicon(32, 14); $(".keymap-key").attr("style", ""); }, 500);