Bootstrap 5 + Darkmode changes
This commit is contained in:
@ -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');
|
||||
|
Reference in New Issue
Block a user