mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-27 17:27:32 +08:00
exported theme colors into a module
This commit is contained in:
Miodec
parent
a185a9620a
commit
36d6398316
8 changed files with 232 additions and 226 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
169
src/js/script.js
169
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(
|
||||
|
|
|
|||
|
|
@ -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
27
src/js/theme-colors.js
Normal 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(" ", "");
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue