Bootstrap 5 + Darkmode changes

This commit is contained in:
Joey Kimsey
2024-12-11 02:08:53 -05:00
parent a0726e6578
commit aaefd66350
32 changed files with 677 additions and 1251 deletions

View File

@ -84,43 +84,24 @@ $(document).ready(function() {
});
// with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content
window.onload = function () {
function updateFooterPadding() {
var footer = document.querySelector('footer');
var container = document.querySelector('.container-fluid.top-pad');
if ( ! container ) {
return;
}
// footer has no height but its children do!
var footerHeight = Array.from(footer.children).reduce((totalHeight, child) => {
return totalHeight + child.offsetHeight;
}, 0);
footerHeight += 20; // Add 20px for padding
// console.error(footerHeight);
container.style.setProperty('--footer-height', footerHeight + 'px');
}
// Update padding on initial load
updateFooterPadding();
// Update padding on window resize
window.addEventListener('resize', updateFooterPadding);
};
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('dark-mode-toggle');
const darkModeStylesheet = document.getElementById('dark-mode-stylesheet');
console.error( 'DOMContentLoaded');
// Check if dark mode is saved in localStorage
if (localStorage.getItem('darkMode') === 'enabled') {
darkModeStylesheet.disabled = false;
toggleButton.checked = true;
console.error( 'darkMode enabled');
} else {
console.error( 'darkMode disabled');
}
toggleButton.addEventListener('click', function () {
console.error( 'addEventListener');
if (darkModeStylesheet.disabled) {
darkModeStylesheet.disabled = false;
localStorage.setItem('darkMode', 'enabled');