exported theme colors into a module

This commit is contained in:
Miodec 2021-03-12 17:38:43 +00:00
parent a185a9620a
commit 36d6398316
8 changed files with 232 additions and 226 deletions

View file

@ -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

View file

@ -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;

View file

@ -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();
}
}

View file

@ -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";

View file

@ -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(

View file

@ -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);

27
src/js/theme-colors.js Normal file
View file

@ -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(" ", "");
}

View file

@ -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);