130 lines
3.9 KiB
JavaScript
130 lines
3.9 KiB
JavaScript
/**
|
|
* Theme Management
|
|
* Handles dark/light mode and visual customization
|
|
*/
|
|
|
|
import { appState, userPreferences, updateState, updatePreference } from '../core/state.js';
|
|
import { savePreferences } from '../core/storage.js';
|
|
|
|
/**
|
|
* Toggle between dark and light theme
|
|
*/
|
|
export function toggleTheme() {
|
|
const newTheme = appState.currentTheme === 'dark' ? 'light' : 'dark';
|
|
updateState('currentTheme', newTheme);
|
|
updatePreference('theme', newTheme);
|
|
savePreferences();
|
|
applyTheme();
|
|
}
|
|
|
|
/**
|
|
* Apply current theme to document
|
|
*/
|
|
export function applyTheme() {
|
|
const theme = appState.currentTheme;
|
|
|
|
// Apply theme attributes
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.documentElement.setAttribute('data-color-scheme', theme);
|
|
|
|
// Update theme toggle button
|
|
const btn = document.getElementById('theme-toggle');
|
|
if (btn) {
|
|
btn.textContent = theme === 'dark' ? '☀️ Claro' : '🌙 Escuro';
|
|
btn.classList.toggle('light', theme === 'light');
|
|
}
|
|
|
|
console.log(`🎨 Tema aplicado: ${theme}`);
|
|
}
|
|
|
|
/**
|
|
* Apply all user preferences (theme, colors, fonts)
|
|
*/
|
|
export function applyUserPreferences() {
|
|
// Apply theme
|
|
updateState('currentTheme', userPreferences.theme);
|
|
applyTheme();
|
|
|
|
// Apply color scheme variant
|
|
document.documentElement.setAttribute('data-color-scheme-variant', userPreferences.colorScheme);
|
|
|
|
// Apply font size
|
|
document.documentElement.setAttribute('data-font-size', userPreferences.fontSize);
|
|
|
|
// Apply font family
|
|
document.documentElement.setAttribute('data-font-family', userPreferences.fontFamily);
|
|
|
|
console.log('🎨 Preferências aplicadas:', userPreferences);
|
|
}
|
|
|
|
/**
|
|
* Preview color scheme (used in admin panel)
|
|
* @param {string} scheme - Color scheme name
|
|
*/
|
|
export function previewColorScheme(scheme) {
|
|
updatePreference('colorScheme', scheme);
|
|
applyUserPreferences();
|
|
savePreferences();
|
|
}
|
|
|
|
/**
|
|
* Preview font size (used in admin panel)
|
|
* @param {string} size - Font size name
|
|
*/
|
|
export function previewFontSize(size) {
|
|
updatePreference('fontSize', size);
|
|
applyUserPreferences();
|
|
savePreferences();
|
|
}
|
|
|
|
/**
|
|
* Preview font family (used in admin panel)
|
|
* @param {string} family - Font family name
|
|
*/
|
|
export function previewFontFamily(family) {
|
|
updatePreference('fontFamily', family);
|
|
applyUserPreferences();
|
|
savePreferences();
|
|
}
|
|
|
|
/**
|
|
* Toggle expert mode
|
|
*/
|
|
export function toggleExpertMode() {
|
|
const newMode = !appState.expertMode;
|
|
updateState('expertMode', newMode);
|
|
|
|
document.documentElement.classList.toggle('expert-mode', newMode);
|
|
|
|
// Update header toggle if it exists (legacy)
|
|
const headerBtn = document.getElementById('expert-toggle');
|
|
if (headerBtn) {
|
|
headerBtn.textContent = newMode ? '🔬 Expert' : '🎯 Simples';
|
|
headerBtn.classList.toggle('active', newMode);
|
|
}
|
|
// Update Admin panel toggle if present
|
|
const adminBtn = document.getElementById('adminExpertToggle');
|
|
if (adminBtn) {
|
|
adminBtn.classList.toggle('active', newMode);
|
|
adminBtn.textContent = newMode ? '🔬 Expert Ativo' : '🎯 Alternar Expert';
|
|
}
|
|
|
|
// Filter tools by mode
|
|
if (typeof window.filterToolsByMode === 'function') {
|
|
window.filterToolsByMode();
|
|
}
|
|
|
|
console.log(`🎯 Modo expert: ${newMode ? 'ativado' : 'desativado'}`);
|
|
}
|
|
|
|
// Export to global scope for compatibility
|
|
if (typeof window !== 'undefined') {
|
|
window.toggleTheme = toggleTheme;
|
|
window.applyTheme = applyTheme;
|
|
window.applyUserPreferences = applyUserPreferences;
|
|
window.previewColorScheme = previewColorScheme;
|
|
window.previewFontSize = previewFontSize;
|
|
window.previewFontFamily = previewFontFamily;
|
|
window.toggleExpertMode = toggleExpertMode;
|
|
}
|