wehub-resource-sync
45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
// UI Controls
|
|
|
|
function loadDarkMode() {
|
|
const isDarkMode = localStorage.getItem('darkMode') === 'true';
|
|
document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : '');
|
|
document.getElementById('dark-mode-toggle').checked = isDarkMode;
|
|
}
|
|
|
|
function saveDarkMode(isDarkMode) {
|
|
localStorage.setItem('darkMode', isDarkMode);
|
|
}
|
|
|
|
export function initUI() {
|
|
const settingsIcon = document.getElementById('settings-icon');
|
|
const settingsPanel = document.getElementById('settings-panel');
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
|
|
|
// Load dark mode preference
|
|
loadDarkMode();
|
|
|
|
// Toggle settings panel
|
|
settingsIcon.addEventListener('click', (e) => {
|
|
e.stopPropagation(); // Prevent click from propagating to document
|
|
settingsPanel.classList.toggle('visible');
|
|
});
|
|
|
|
// Close settings when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!settingsPanel.contains(e.target) && settingsPanel.classList.contains('visible')) {
|
|
settingsPanel.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
// Prevent game controls when interacting with settings
|
|
settingsPanel.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Handle dark mode toggle
|
|
darkModeToggle.addEventListener('change', (e) => {
|
|
const isDarkMode = e.target.checked;
|
|
document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : '');
|
|
saveDarkMode(isDarkMode);
|
|
});
|
|
} |