monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-21 07:46:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

added load from preset button to the custom themes

Browse source
This commit is contained in:
Jack 2020-08-30 04:38:14 +01:00
parent 918567f348
commit fdfa073090
2 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/index.html
View file

@ -2159,17 +2159,25 @@
id="--colorful-error-extra-color"
/>
</span>
<div
<!-- <div
style="
grid-column: 3/5;
display: grid;
gap: 1rem;
gap: 2rem;
grid-auto-flow: column;
grid-column: 1/5;
"
> -->
<div
class="button"
id="loadCustomColorsFromPreset"
style="grid-column: 1/3;"
>
<div class="button" id="shareCustomThemeButton">share</div>
<div class="button saveCustomThemeButton">save</div>
load from preset
</div>
<div class="button" id="shareCustomThemeButton">share</div>
<div class="button saveCustomThemeButton">save</div>
<!-- </div> -->
</div>
<div tabContent="preset" class="tabContent">
<div class="favThemes buttons"></div>

40
public/js/settings.js
View file

@ -700,8 +700,8 @@ $(
let $pickedColor = $(e.currentTarget).val();
document.documentElement.style.setProperty($colorVar, $pickedColor);
$("#" + $colorVar).attr("value", $pickedColor);
$("[for=" + $colorVar + "]").text($pickedColor);
$(".colorPicker #" + $colorVar).attr("value", $pickedColor);
$(".colorPicker [for=" + $colorVar + "]").text($pickedColor);
});
$(".pageSettings .saveCustomThemeButton").click((e) => {
@ -716,6 +716,42 @@ $(".pageSettings .saveCustomThemeButton").click((e) => {
showNotification("Custom theme colors saved", 1000);
});
$(".pageSettings #loadCustomColorsFromPreset").click((e) => {
previewTheme(config.theme);
colorVars.forEach((e) => {
document.documentElement.style.setProperty(e, "");
});
setTimeout((fn) => {
refreshThemeColorObject();
colorVars.forEach((colorName) => {
let color;
if (colorName === "--bg-color") {
color = themeColors.bg;
} else if (colorName === "--main-color") {
color = themeColors.main;
} else if (colorName === "--sub-color") {
color = themeColors.sub;
} else if (colorName === "--caret-color") {
color = themeColors.caret;
} else if (colorName === "--text-color") {
color = themeColors.text;
} else if (colorName === "--error-color") {
color = themeColors.error;
} else if (colorName === "--error-extra-color") {
color = themeColors.errorExtra;
} else if (colorName === "--colorful-error-color") {
color = themeColors.colorfulError;
} else if (colorName === "--colorful-error-extra-color") {
color = themeColors.colorfulErrorExtra;
}
$(".colorPicker #" + colorName).attr("value", color);
$(".colorPicker #" + colorName).val(color);
$(".colorPicker [for=" + colorName + "]").text(color);
});
}, 250);
});
$(".pageSettings .sectionGroupTitle").click((e) => {
let group = $(e.currentTarget).attr("group");
$(`.pageSettings .settingsGroup.${group}`)