From 6c4653c96202409a21ef9258a1c96d51e6106e1e Mon Sep 17 00:00:00 2001 From: Michael Maurakis Date: Sun, 19 Jan 2025 19:30:51 -0600 Subject: [PATCH] added dark mode to header. --- index.html | 22 ++++++++++++++++++++- styles.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9dbe302..d50e5bb 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,10 @@
- +
+ + +
@@ -21,6 +24,23 @@ // Open wiby.me/surprise directly in the iframe frame.src = 'https://wiby.me/surprise/'; }); + + // Dark mode toggle + const darkModeToggle = document.getElementById('darkModeToggle'); + const body = document.body; + + // Check for saved preference + if (localStorage.getItem('darkMode') === 'true') { + body.classList.add('dark-mode'); + darkModeToggle.textContent = '☀️'; + } + + darkModeToggle.addEventListener('click', () => { + body.classList.toggle('dark-mode'); + const isDark = body.classList.contains('dark-mode'); + darkModeToggle.textContent = isDark ? '☀️' : '🌙'; + localStorage.setItem('darkMode', isDark); + }); \ No newline at end of file diff --git a/styles.css b/styles.css index c72e423..8b1bbb9 100644 --- a/styles.css +++ b/styles.css @@ -60,4 +60,61 @@ main { width: 100%; height: 100%; border: none; +} + +.header-buttons { + display: flex; + gap: 1rem; + align-items: center; +} + +#darkModeToggle { + padding: 8px; + background-color: transparent; + border: none; + font-size: 20px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s; +} + +#darkModeToggle:hover { + transform: scale(1.1); +} + +/* Dark mode styles - simplified to only affect header */ +.dark-mode header { + background-color: #1a1a1a; + box-shadow: 0 2px 5px rgba(0,0,0,0.3); +} + +.dark-mode .logo { + color: #ff6b4a; +} + +.dark-mode #fumbleButton { + background-color: #ff6b4a; +} + +.dark-mode #fumbleButton:hover { + background-color: #ff7c5c; +} + +/* Remove these styles */ +body { + display: flex; + flex-direction: column; + height: 100vh; + font-family: Arial, sans-serif; + /* Remove transition since we're not changing body background */ +} + +/* Remove the general dark mode style that was affecting the whole body */ +.dark-mode { + /* Remove these styles */ + /* background-color: #1a1a1a; */ + /* color: #ffffff; */ } \ No newline at end of file