From 39e86cf3071c3c8dab58f9617b1e8252365c3622 Mon Sep 17 00:00:00 2001 From: mileswa1q22 Date: Thu, 3 Apr 2025 14:16:38 +0000 Subject: [PATCH] Implement dark/light mode toggle functionality with cookie support; refactor CSS variables for improved readability --- WebGames-master/WebGames-master/index.html | 100 +++++++++++++++++++-- index.html | 11 ++- 2 files changed, 101 insertions(+), 10 deletions(-) diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html index 28693405..bc5e82aa 100644 --- a/WebGames-master/WebGames-master/index.html +++ b/WebGames-master/WebGames-master/index.html @@ -7,11 +7,23 @@ -

Web Games

+

Web Games

+
@@ -690,6 +723,59 @@ const noResultsElement = document.getElementById('noResults'); noResultsElement.style.display = hasResults ? 'none' : 'flex'; } + + // Utility function to set a cookie + function setCookie(name, value, days) { + const date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`; + } + + // Utility function to get a cookie + function getCookie(name) { + const cookies = document.cookie.split(';'); + for (let i = 0; i < cookies.length; i++) { + const cookie = cookies[i].trim(); + if (cookie.startsWith(name + '=')) { + return cookie.substring(name.length + 1); + } + } + return null; + } + + // Apply dark or light mode based on cookie + function applyMode(isDarkMode) { + const pageTitle = document.getElementById('pageTitle'); + if (isDarkMode) { + document.body.style.setProperty('--background-color', 'var(--background-color-dark)'); + document.body.style.setProperty('--text-color', 'var(--text-color-dark)'); + document.body.style.setProperty('--card-bg', 'var(--card-bg-dark)'); + document.body.style.setProperty('--card-hover-bg', 'var(--card-hover-bg-dark)'); + document.body.style.setProperty('--card-hover-text', 'var(--card-hover-text-dark)'); + pageTitle.style.textShadow = 'var(--title-shadow-dark)'; + document.getElementById('toggleMode').textContent = 'Switch to Light Mode'; + } else { + document.body.style.setProperty('--background-color', 'var(--background-color-light)'); + document.body.style.setProperty('--text-color', 'var(--text-color-light)'); + document.body.style.setProperty('--card-bg', 'var(--card-bg-light)'); + document.body.style.setProperty('--card-hover-bg', 'var(--card-hover-bg-light)'); + document.body.style.setProperty('--card-hover-text', 'var(--card-hover-text-light)'); + pageTitle.style.textShadow = 'none'; // Remove glow in light mode + document.getElementById('toggleMode').textContent = 'Switch to Dark Mode'; + } + } + + // Toggle mode + const toggleModeButton = document.getElementById('toggleMode'); + toggleModeButton.addEventListener('click', () => { + const isDarkMode = getCookie('darkMode') === 'true'; + setCookie('darkMode', !isDarkMode, 30); // Save preference for 30 days + applyMode(!isDarkMode); + }); + + // Apply saved mode on load + const darkModeEnabled = getCookie('darkMode') === 'true'; + applyMode(darkModeEnabled); \ No newline at end of file diff --git a/index.html b/index.html index 16647759..645094ac 100644 --- a/index.html +++ b/index.html @@ -125,9 +125,14 @@ } } - // Toggle dark mode - const isDarkMode = getCookie('darkMode') === 'true'; - applyDarkMode(isDarkMode); + // Ensure dark mode is the default + if (getCookie('darkMode') === null) { + setCookie('darkMode', 'true', 30); // Default to dark mode + } + + // Apply saved mode on load + const darkModeEnabled = getCookie('darkMode') === 'true'; + applyDarkMode(darkModeEnabled);