96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
const r = document.querySelector(':root');
|
|
|
|
const fgInput = document.getElementById('foreground-setting');
|
|
const bgInput = document.getElementById('background-setting');
|
|
const spacingInput = document.getElementById('frame-spacing-setting');
|
|
const radiusInput = document.getElementById('frame-border-radius-setting');
|
|
const saveBtn = document.getElementById('save-settings-button');
|
|
const resetBtn = document.getElementById('reset-settings-button');
|
|
|
|
let lightMode = false;
|
|
|
|
const defaultSettings = {
|
|
foreground: "#ba1818",
|
|
background: "#0f0f0f",
|
|
spacing: "15px",
|
|
radius: "10px"
|
|
};
|
|
|
|
saveBtn.addEventListener('click', () => {
|
|
const currentSettings = {
|
|
foreground: fgInput.value,
|
|
background: bgInput.value,
|
|
spacing: spacingInput.value + 'px',
|
|
radius: radiusInput.value + 'px'
|
|
};
|
|
|
|
setForegroundColor(currentSettings.foreground);
|
|
setBackgroundColor(currentSettings.background);
|
|
setFrameSpacing(currentSettings.spacing);
|
|
setFrameBorderRadius(currentSettings.radius);
|
|
|
|
localStorage.setItem('user-settings', JSON.stringify(currentSettings));
|
|
});
|
|
|
|
resetBtn.addEventListener('click', () => {
|
|
localStorage.setItem('user-settings', JSON.stringify(defaultSettings));
|
|
loadStoredSettings();
|
|
syncSettings();
|
|
});
|
|
|
|
function setForegroundColor(color) {
|
|
r.style.setProperty('--color-foreground', color);
|
|
}
|
|
|
|
function setBackgroundColor(color) {
|
|
r.style.setProperty('--color-background', color);
|
|
}
|
|
|
|
function setFrameSpacing(amount) {
|
|
r.style.setProperty('--frame-spacing', amount);
|
|
}
|
|
|
|
function setFrameBorderRadius(amount) {
|
|
r.style.setProperty('--frame-border-radius', amount);
|
|
}
|
|
|
|
function syncSettings() {
|
|
const rootStyles = getComputedStyle(document.documentElement);
|
|
|
|
const varMap = {
|
|
'foreground-setting': '--color-foreground',
|
|
'background-setting': '--color-background',
|
|
'frame-spacing-setting': '--frame-spacing',
|
|
'frame-border-radius-setting': '--frame-border-radius'
|
|
};
|
|
|
|
for (const [id, variable] of Object.entries(varMap)) {
|
|
const element = document.getElementById(id);
|
|
|
|
if (element) {
|
|
let cssValue = rootStyles.getPropertyValue(variable).trim();
|
|
|
|
if (element.type === 'number') {
|
|
element.value = parseFloat(cssValue) || 0;
|
|
} else {
|
|
element.value = cssValue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function loadStoredSettings() {
|
|
const saved = localStorage.getItem('user-settings');
|
|
|
|
if (saved) {
|
|
const settings = JSON.parse(saved);
|
|
|
|
setForegroundColor(settings.foreground);
|
|
setBackgroundColor(settings.background);
|
|
setFrameSpacing(settings.spacing);
|
|
setFrameBorderRadius(settings.radius);
|
|
}
|
|
}
|
|
|
|
loadStoredSettings();
|
|
syncSettings(); |