LoquendoBot/src/js/theme.js
2023-12-28 16:25:52 +01:00

143 lines
6.5 KiB
JavaScript

/* global settings, root, fs, settingsPath, ini */
function changeColor(section, setting, tempSection) {
document.querySelector(section).value = setting;
const value = document.querySelector(section).value;
root.style.setProperty(tempSection, value);
}
function setCurrentTheme(adjustTemp = false) {
changeColor('#MAIN_COLOR_1', settings.THEME.MAIN_COLOR_1, adjustTemp ? '--main-color1-temp' : '--main-color1');
changeColor('#MAIN_COLOR_2', settings.THEME.MAIN_COLOR_2, adjustTemp ? '--main-color2-temp' : '--main-color2');
changeColor('#MAIN_COLOR_3', settings.THEME.MAIN_COLOR_3, adjustTemp ? '--main-color3-temp' : '--main-color3');
changeColor('#MAIN_COLOR_4', settings.THEME.MAIN_COLOR_4, adjustTemp ? '--main-color4-temp' : '--main-color4');
changeColor('#TOP_BAR', settings.THEME.TOP_BAR, adjustTemp ? '--top-bar-temp' : '--top-bar');
changeColor('#MID_SECTION', settings.THEME.MID_SECTION, adjustTemp ? '--mid-section-temp' : '--mid-section');
changeColor('#CHAT_BUBBLE_BG', settings.THEME.CHAT_BUBBLE_BG, adjustTemp ? '--chat-bubble-temp' : '--chat-bubble');
changeColor('#CHAT_BUBBLE_HEADER', settings.THEME.CHAT_BUBBLE_HEADER, adjustTemp ? '--chat-bubble-header-temp' : '--chat-bubble-header');
changeColor(
'#CHAT_BUBBLE_MESSAGE',
settings.THEME.CHAT_BUBBLE_MESSAGE,
adjustTemp ? '--chat-bubble-message-temp' : '--chat-bubble-message'
);
}
setCurrentTheme(true);
function setTheme() {
if (settings.THEME.USE_CUSTOM_THEME) {
setCurrentTheme();
} else {
root.style.setProperty('--main-color1', '#6e2c8c');
root.style.setProperty('--main-color2', 'white');
root.style.setProperty('--main-color3', '#211E1E');
root.style.setProperty('--main-color4', '#2f2c34');
root.style.setProperty('--top-bar', '#100B12');
root.style.setProperty('--mid-section', '#352d3d');
root.style.setProperty('--chat-bubble', ' #7A6D7F');
root.style.setProperty('--chat-bubble-header', '#141414');
root.style.setProperty('--chat-bubble-message', 'white');
}
}
document.body.querySelector('#MAIN_COLOR_1').addEventListener('input', () => {
const x = document.getElementById('MAIN_COLOR_1').value;
root.style.setProperty('--main-color1-temp', x);
console.log(x);
});
document.body.querySelector('#MAIN_COLOR_1').addEventListener('change', () => {
settings.THEME.MAIN_COLOR_1 = document.getElementById('MAIN_COLOR_1').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#MAIN_COLOR_1', settings.THEME.MAIN_COLOR_1, '--main-color1');
});
document.body.querySelector('#MAIN_COLOR_2').addEventListener('input', () => {
const x = document.getElementById('MAIN_COLOR_2').value;
root.style.setProperty('--main-color2-temp', x);
});
document.body.querySelector('#MAIN_COLOR_2').addEventListener('change', () => {
settings.THEME.MAIN_COLOR_2 = document.getElementById('MAIN_COLOR_2').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#MAIN_COLOR_2', settings.THEME.MAIN_COLOR_2, '--main-color2');
});
document.body.querySelector('#MAIN_COLOR_3').addEventListener('input', () => {
const x = document.getElementById('MAIN_COLOR_3').value;
root.style.setProperty('--main-color3-temp', x);
});
document.body.querySelector('#MAIN_COLOR_3').addEventListener('change', () => {
settings.THEME.MAIN_COLOR_3 = document.getElementById('MAIN_COLOR_3').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#MAIN_COLOR_3', settings.THEME.MAIN_COLOR_3, '--main-color3');
});
document.body.querySelector('#MAIN_COLOR_4').addEventListener('input', () => {
const x = document.getElementById('MAIN_COLOR_4').value;
root.style.setProperty('--main-color4-temp', x);
});
document.body.querySelector('#MAIN_COLOR_4').addEventListener('change', () => {
settings.THEME.MAIN_COLOR_4 = document.getElementById('MAIN_COLOR_4').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#MAIN_COLOR_4', settings.THEME.MAIN_COLOR_4, '--main-color4');
});
document.body.querySelector('#TOP_BAR').addEventListener('input', () => {
const x = document.getElementById('TOP_BAR').value;
root.style.setProperty('--top-bar-temp', x);
});
document.body.querySelector('#TOP_BAR').addEventListener('change', () => {
settings.THEME.TOP_BAR = document.getElementById('TOP_BAR').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#TOP_BAR', settings.THEME.TOP_BAR, '--top-bar');
});
document.body.querySelector('#MID_SECTION').addEventListener('input', () => {
const x = document.getElementById('MID_SECTION').value;
root.style.setProperty('--mid-section-temp', x);
});
document.body.querySelector('#MID_SECTION').addEventListener('change', () => {
settings.THEME.MID_SECTION = document.getElementById('MID_SECTION').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#MID_SECTION', settings.THEME.MID_SECTION, '--mid-section');
});
document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('input', () => {
const x = document.getElementById('CHAT_BUBBLE_BG').value;
root.style.setProperty('--chat-bubble-temp', x);
});
document.body.querySelector('#CHAT_BUBBLE_BG').addEventListener('change', () => {
settings.THEME.CHAT_BUBBLE_BG = document.getElementById('CHAT_BUBBLE_BG').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#CHAT_BUBBLE_BG', settings.THEME.CHAT_BUBBLE_BG, '--chat-bubble');
});
document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('input', () => {
const x = document.getElementById('CHAT_BUBBLE_HEADER').value;
root.style.setProperty('--chat-bubble-header-temp', x);
});
document.body.querySelector('#CHAT_BUBBLE_HEADER').addEventListener('change', () => {
settings.THEME.CHAT_BUBBLE_HEADER = document.getElementById('CHAT_BUBBLE_HEADER').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#CHAT_BUBBLE_HEADER', settings.THEME.CHAT_BUBBLE_HEADER, '--chat-bubble-header');
});
document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('input', () => {
const x = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
root.style.setProperty('--chat-bubble-message-temp', x);
});
document.body.querySelector('#CHAT_BUBBLE_MESSAGE').addEventListener('change', () => {
settings.THEME.CHAT_BUBBLE_MESSAGE = document.getElementById('CHAT_BUBBLE_MESSAGE').value;
fs.writeFileSync(settingsPath, ini.stringify(settings));
changeColor('#CHAT_BUBBLE_MESSAGE', settings.THEME.CHAT_BUBBLE_MESSAGE, '--chat-bubble-message');
});
module.exports = { setTheme };