diff --git a/darkmode.js b/darkmode.js index 2b6fc5c..bce083b 100644 --- a/darkmode.js +++ b/darkmode.js @@ -1,3 +1,27 @@ +// Dark Mode Toggle Function +function toggleDarkMode() { + const body = document.body; + const darkModeToggle = document.getElementById('darkModeToggle'); + const sunMoon = document.getElementById('sunMoon'); + + if (darkModeToggle.checked) { + body.classList.add('dark-mode'); + sunMoon.innerHTML = '🌙'; // Moon symbol + setCookie('darkMode', 'enabled', 365); + } else { + body.classList.remove('dark-mode'); + sunMoon.innerHTML = '☀'; // Sun symbol + setCookie('darkMode', 'disabled', 365); + } +} + +// Function to set a cookie +function setCookie(name, value, days) { + const expires = new Date(); + expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); + document.cookie = name + '=' + value + ';expires=' + expires.toUTCString(); +} + // Function to get a cookie function getCookie(name) { const cookieName = name + '='; @@ -14,30 +38,27 @@ function getCookie(name) { return ''; } -// Dark Mode Toggle Function -function toggleDarkMode() { - const body = document.body; - const darkModeToggle = document.getElementById('darkModeToggle'); // Check if the element exists +// Function to accept cookies +function acceptCookies() { + document.getElementById('cookieConsent').style.display = 'none'; + setCookie('cookieConsent', 'accepted', 365); + + // Check and apply dark mode preference + const darkModeToggle = document.getElementById('darkModeToggle'); const sunMoon = document.getElementById('sunMoon'); + const darkModeCookie = getCookie('darkMode'); - if (darkModeToggle) { // Ensure darkModeToggle exists before proceeding - if (darkModeToggle.checked) { - body.classList.add('dark-mode'); - sunMoon.innerHTML = '🌙'; // Moon symbol - setCookie('darkMode', 'enabled', 365); - } else { - body.classList.remove('dark-mode'); - sunMoon.innerHTML = '☀'; // Sun symbol - setCookie('darkMode', 'disabled', 365); - } + if (darkModeCookie === 'enabled') { + darkModeToggle.checked = true; + document.body.classList.add('dark-mode'); + sunMoon.innerHTML = '🌙'; // Moon symbol + } else { + darkModeToggle.checked = false; + document.body.classList.remove('dark-mode'); + sunMoon.innerHTML = '☀'; // Sun symbol } -} -// Function to set a cookie -function setCookie(name, value, days) { - const expires = new Date(); - expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); - document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/'; // Added path=/ + applyDarkModeToIframe(); // Apply dark mode styles to the iframe content } // Function to apply dark mode styles to iframe content @@ -53,28 +74,26 @@ function applyDarkModeToIframe() { } // Event listener for dark mode toggle +document.getElementById('darkModeToggle').addEventListener('change', function() { + toggleDarkMode(); + applyDarkModeToIframe(); +}); + +// Check and apply dark mode preference on initial load window.addEventListener('load', function() { const darkModeToggle = document.getElementById('darkModeToggle'); const sunMoon = document.getElementById('sunMoon'); + const darkModeCookie = getCookie('darkMode'); - if (darkModeToggle) { // Ensure darkModeToggle exists before proceeding - darkModeToggle.addEventListener('change', function() { - toggleDarkMode(); - applyDarkModeToIframe(); - }); - - const darkModeCookie = getCookie('darkMode'); - - if (darkModeCookie === 'enabled') { - darkModeToggle.checked = true; - document.body.classList.add('dark-mode'); - sunMoon.innerHTML = '🌙'; // Moon symbol - } else { - darkModeToggle.checked = false; - document.body.classList.remove('dark-mode'); - sunMoon.innerHTML = '☀'; // Sun symbol - } - - applyDarkModeToIframe(); // Apply dark mode styles to the iframe on initial load + if (darkModeCookie === 'enabled') { + darkModeToggle.checked = true; + document.body.classList.add('dark-mode'); + sunMoon.innerHTML = '🌙'; // Moon symbol + } else { + darkModeToggle.checked = false; + document.body.classList.remove('dark-mode'); + sunMoon.innerHTML = '☀'; // Sun symbol } + + applyDarkModeToIframe(); // Apply dark mode styles to the iframe on initial load });