44 lines
1.6 KiB
JavaScript
44 lines
1.6 KiB
JavaScript
let darkModeEnabled = false; // Default to false
|
|
|
|
// Check if user preference for dark mode is stored in a cookie
|
|
const cookieValue = document.cookie;
|
|
if (cookieValue.indexOf('darkModeEnabled=true') !== -1) {
|
|
darkModeEnabled = true;
|
|
} else {
|
|
// Check if user preference for dark mode is set at the system level
|
|
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (prefersDarkMode) {
|
|
darkModeEnabled = true;
|
|
}
|
|
}
|
|
|
|
// Apply dark mode based on the user's preference
|
|
function applyDarkMode() {
|
|
const theme = darkModeEnabled ? "dark" : "light";
|
|
document.documentElement.setAttribute("data-bs-theme", theme);
|
|
|
|
// Change the icon based on the theme
|
|
const icon = darkModeEnabled ? "fa-sun" : "fa-moon";
|
|
const iconElement = document.getElementById("darkModeIcon");
|
|
iconElement.classList.remove(darkModeEnabled ? "fa-moon" : "fa-sun");
|
|
iconElement.classList.add(icon);
|
|
}
|
|
|
|
// Toggle dark mode and store the preference in a cookie
|
|
function toggleDarkMode() {
|
|
darkModeEnabled = !darkModeEnabled;
|
|
const expirationDate = new Date();
|
|
expirationDate.setFullYear(expirationDate.getFullYear() + 1);
|
|
const cookieValue = `darkModeEnabled=${darkModeEnabled}; expires=${expirationDate.toUTCString()}`;
|
|
document.cookie = cookieValue;
|
|
applyDarkMode();
|
|
}
|
|
|
|
// Add event listener to the toggle button if it exists
|
|
const darkModeButton = document.getElementById("darkModeButton");
|
|
if (darkModeButton) {
|
|
darkModeButton.addEventListener("click", toggleDarkMode);
|
|
}
|
|
|
|
// Apply dark mode on page load
|
|
applyDarkMode();
|