System-End/YSWS-Catalog
1
0
Fork 0
mirror of https://github.com/System-End/YSWS-Catalog.git synced 2026-04-19 19:55:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add dark mode theme toggle and persistent theme support

Browse source
This commit is contained in:
PawiX25 2024-12-10 01:12:16 +01:00
parent de6d96b376
commit 071101d7b0
3 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -7,6 +7,9 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
🌙
</button>
<div class="container">
<h1 class="ultratitle">YSWS Programs</h1>
<p class="lead">A comprehensive list of Hack Club's "You Ship, We Ship" programs.</p>

24
script.js
View file

@ -341,6 +341,27 @@ function filterPrograms(category) {
});
}
function toggleTheme() {
const body = document.body;
const toggleBtn = document.getElementById('theme-toggle');
const isDark = body.classList.toggle('dark-theme');
toggleBtn.textContent = isDark ? '☀️' : '🌙';
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
function initializeTheme() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const toggleBtn = document.getElementById('theme-toggle');
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.body.classList.add('dark-theme');
toggleBtn.textContent = '☀️';
}
}
document.addEventListener('DOMContentLoaded', () => {
renderPrograms();
@ -349,4 +370,7 @@ document.addEventListener('DOMContentLoaded', () => {
filterPrograms(button.dataset.category);
});
});
initializeTheme();
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
});

33
styles.css
View file

@ -84,6 +84,37 @@
--shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);
--shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625),
0 8px 12px rgba(0, 0, 0, 0.125);
--dark-background: var(--darker);
--dark-text: var(--snow);
--dark-elevated: var(--dark);
--dark-border: var(--darkless);
--dark-sunken: var(--darkless);
}
.dark-theme {
--text: var(--dark-text);
--background: var(--dark-background);
--elevated: var(--dark-elevated);
--border: var(--dark-border);
--sunken: var(--dark-sunken);
}
.theme-toggle {
position: fixed;
top: var(--spacing-3);
right: var(--spacing-3);
padding: var(--spacing-2);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--elevated);
border: 1px solid var(--border);
cursor: pointer;
z-index: 1000;
}
body {
@ -99,6 +130,8 @@ body {
-webkit-font-smoothing: antialiased;
color: var(--text);
box-sizing: border-box;
background: var(--background);
transition: background-color 0.3s ease;
}
* {