74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const darkModeButton = document.getElementById("dark-mode-toggle");
|
|
const mobileDarkModeButton = document.getElementById("dark-mode-toggle-mobile");
|
|
const body = document.body;
|
|
|
|
function toggleDarkMode(save){
|
|
const isLightMode = body.classList.toggle("light-mode");
|
|
darkModeButton.innerHTML = isLightMode ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
|
|
|
|
if (save){
|
|
localStorage.setItem("theme", isLightMode ? "light" : "dark");
|
|
}
|
|
}
|
|
|
|
// Load Dark Mode preference from cache
|
|
const theme = localStorage.getItem("theme");
|
|
if (theme === "light"){
|
|
body.classList.add("light-mode");
|
|
darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
|
|
}
|
|
|
|
darkModeButton.addEventListener("click", () => {
|
|
toggleDarkMode(true);
|
|
})
|
|
|
|
mobileDarkModeButton.addEventListener("click", () => {
|
|
toggleDarkMode(true);
|
|
})
|
|
|
|
// Add/remove scrolled style to header
|
|
window.addEventListener("scroll", () => {
|
|
const header = document.querySelector("header");
|
|
|
|
if (window.scrollY === 0){
|
|
header.classList.remove("scrolled");
|
|
} else {
|
|
header.classList.add("scrolled");
|
|
}
|
|
})
|
|
|
|
// Mobile Nav
|
|
const mobileNavButton = document.getElementById("mobile-nav-toggle");
|
|
const mobileNav = document.getElementById("mobile-nav");
|
|
|
|
mobileNavButton.addEventListener("click", () => {
|
|
mobileNav.classList.toggle("active");
|
|
})
|
|
|
|
document.addEventListener("click", function(event) {
|
|
const isInsideMobileNav = mobileNav.contains(event.target);
|
|
const isClickToggle = mobileNavButton.contains(event.target);
|
|
|
|
if (!isInsideMobileNav && !isClickToggle){
|
|
mobileNav.classList.remove("active");
|
|
}
|
|
})
|
|
|
|
document.addEventListener("touchstart", function(event) {
|
|
const isInsideMobileNav = mobileNav.contains(event.target);
|
|
const isClickToggle = mobileNavButton.contains(event.target);
|
|
|
|
if (!isInsideMobileNav && !isClickToggle){
|
|
mobileNav.classList.remove("active");
|
|
}
|
|
})
|
|
|
|
const mobileNavLinks = mobileNav.querySelectorAll("a");
|
|
mobileNavLinks.forEach(link => {
|
|
link.addEventListener("click", () => {
|
|
mobileNav.classList.remove("active");
|
|
})
|
|
})
|
|
})
|