EaglercraftX-Site/js/darkmode.js
2025-01-14 07:59:01 -08:00

67 lines
2.8 KiB
JavaScript

import {
hexToRGB,
pushStyles,
selectClass,
selectId,
selectTag,
} from "./helperFunctions.js";
global.querySelectorAll = document.querySelectorAll;
$(function() {
function applyStyles(elements, styles) {
elements.forEach(element => pushStyles(element, styles));
}
function updateDarkMode(isChecked = true) {
const body = document.body.id ? selectId(document.body.id) : selectTag('body');
const commonStyles = isChecked ? {
backgroundColor: hexToRGB('#141414'),
color: hexToRGB('#f1f1f1')
} : {
backgroundColor: '#f1f1f1',
color: 'black',
backgroundImage: "url('/images/grass-background.jpg')"
};
pushStyles(body, commonStyles);
applyStyles(document.querySelectorAll('p'), { color: commonStyles.color });
applyStyles([selectTag('h2'), selectTag('h1')], { color: commonStyles.color });
if (isChecked) {
pushStyles(selectTag('h1'), {
textShadow: '-0px 0 white, 0 0px white, 0px 0 white, 0 -0px white'
});
pushStyles(selectClass('footer'), { backgroundColor: hexToRGB('#6C8592') });
pushStyles(selectClass('source-btn'), { backgroundColor: hexToRGB('#ff6847') });
applyStyles(document.querySelectorAll('button'), { backgroundColor: hexToRGB('#30d3d2') });
applyStyles(document.querySelectorAll('.version-text'), { color: hexToRGB('#f1f1f1') });
pushStyles(document.querySelector('.danger-zone'), { color: '#ff6847' });
pushStyles(document.querySelector('.modal'), { color: '#ff3c00' });
localStorage.setItem('darkModeOn', true);
} else {
pushStyles(selectTag('h1'), {
textShadow: '-0px 0 white, 0 0px white, 0px 0 white, 0 -0px white'
});
pushStyles(selectClass('footer'), { backgroundColor: '#000000', color: '#ffffff' });
pushStyles(selectClass('source-btn'), { backgroundColor: '#0095ff' });
applyStyles(document.querySelectorAll('button'), { backgroundColor: '#4caf50' });
applyStyles(document.querySelectorAll('.version-text'), { color: 'black' });
pushStyles(document.querySelector('.danger-zone'), { color: '#010101' });
pushStyles(document.querySelector('.modal'), { color: '#010101' });
localStorage.removeItem("darkModeOn");
}
}
const darkModeCheckbox = document.getElementById('darkModeCheckbox');
if (localStorage.getItem('darkModeOn') === 'true') {
darkModeCheckbox.checked = true;
}
updateDarkMode(darkModeCheckbox.checked);
$("#darkModeCheckbox").on("change", function() {
updateDarkMode(darkModeCheckbox.checked);
});
});