60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
// Theme management
|
|
const THEME_KEY = 'dfir-theme';
|
|
|
|
// Get system preference
|
|
function getSystemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
// Get stored theme or default to auto
|
|
function getStoredTheme() {
|
|
return localStorage.getItem(THEME_KEY) || 'auto';
|
|
}
|
|
|
|
// Apply theme to document
|
|
function applyTheme(theme) {
|
|
const effectiveTheme = theme === 'auto' ? getSystemTheme() : theme;
|
|
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
|
}
|
|
|
|
// Initialize theme on page load
|
|
function initTheme() {
|
|
const storedTheme = getStoredTheme();
|
|
applyTheme(storedTheme);
|
|
|
|
// Update theme toggle buttons
|
|
document.querySelectorAll('[data-theme-toggle]').forEach(button => {
|
|
button.setAttribute('data-current-theme', storedTheme);
|
|
});
|
|
}
|
|
|
|
// Handle theme toggle
|
|
function toggleTheme() {
|
|
const current = getStoredTheme();
|
|
const themes = ['light', 'dark', 'auto'];
|
|
const currentIndex = themes.indexOf(current);
|
|
const nextIndex = (currentIndex + 1) % themes.length;
|
|
const nextTheme = themes[nextIndex];
|
|
|
|
localStorage.setItem(THEME_KEY, nextTheme);
|
|
applyTheme(nextTheme);
|
|
|
|
// Update all theme toggle buttons
|
|
document.querySelectorAll('[data-theme-toggle]').forEach(button => {
|
|
button.setAttribute('data-current-theme', nextTheme);
|
|
});
|
|
}
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
if (getStoredTheme() === 'auto') {
|
|
applyTheme('auto');
|
|
}
|
|
});
|
|
|
|
// Export functions for use in Astro components
|
|
window.themeUtils = {
|
|
initTheme,
|
|
toggleTheme,
|
|
getStoredTheme
|
|
}; |