michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix dark/light theme toggle, adjust text, change images to png screenshots

Browse Source
This commit is contained in:
Michael DiLeo
2025-08-17 12:29:26 -05:00
parent fc0c2f5a1c
commit f9011f5ef4
4 changed files with 43 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
public/site-scripts/theme-toggle.js
View File

@@ -1,23 +1,25 @@
(function() {
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
function getStoredTheme() {
return localStorage.getItem('picoPreferredColorScheme') || 'auto';
}
function storeTheme(theme) {
localStorage.setItem('picoPreferredColorScheme', theme);
}
function getSystemTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
function getStoredTheme() {
return localStorage.getItem('picoPreferredColorScheme');
}
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
if (theme === 'dark') {
function getCurrentTheme() {
return document.documentElement.getAttribute('data-theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}
function applyTheme(currentTheme) {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
if (newTheme === 'dark') {
themeIcon.textContent = '☀️';
themeToggle.setAttribute('aria-pressed', 'true');
} else {
@@ -25,39 +27,28 @@
themeToggle.setAttribute('aria-pressed', 'false');
}
}
function toggleTheme() {
let currentStored = getStoredTheme();
if (currentStored === 'auto') {
currentStored = getSystemTheme();
}
if (currentStored === 'auto') {
currentStored = 'light';
}
let nextTheme;
nextTheme = currentStored === 'light' ? 'dark' : 'light';
storeTheme(nextTheme);
applyTheme(nextTheme);
}
function init() {
if (themeToggle) {
let storedTheme = getStoredTheme();
if (storedTheme && storedTheme !== 'auto') {
applyTheme(storedTheme);
themeToggle.addEventListener('click', () => {
const currentTheme = getCurrentTheme();
applyTheme(currentTheme);
storeTheme(currentTheme);
});
function init() {
let storedTheme = getStoredTheme() || getCurrentTheme();
applyTheme(storedTheme);
themeToggle.addEventListener('click', toggleTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
// Only apply theme if user hasn't made an explicit choice
const storedTheme = getStoredTheme();
if (storedTheme === 'auto') {
applyTheme();
}
themeToggle.addEventListener('click', toggleTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (getStoredTheme() === 'auto') {
applyTheme();
}
});
}
})
}
if (document.readyState !== 'loading') {