michael/FumbleAround
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added dark mode to header.

Browse source
This commit is contained in:
Michael Andrew Maurakis 2025-01-19 19:30:51 -06:00
parent 712f350fe7
commit 6c4653c962
2 changed files with 78 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
index.html
View file

@ -9,7 +9,10 @@
<body>
<header>
<div class="logo">FumbleUpon</div>
<button id="fumbleButton">Fumble!</button>
<div class="header-buttons">
<button id="darkModeToggle">🌙</button>
<button id="fumbleButton">Fumble!</button>
</div>
</header>
<main>
<iframe id="contentFrame" src="about:blank" title="Content"></iframe>
@ -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);
});
</script>
</body>
</html>

57
styles.css
View file

@ -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; */
}