/** * Linux BenchTools - Theme Manager * Handles dynamic theme loading and switching */ (function() { 'use strict'; const THEME_STORAGE_KEY = 'benchtools_theme'; const DEFAULT_THEME = 'monokai-dark'; const THEMES = { 'monokai-dark': { name: 'Monokai Dark', file: 'css/themes/monokai-dark.css' }, 'monokai-light': { name: 'Monokai Light', file: 'css/themes/monokai-light.css' }, 'gruvbox-dark': { name: 'Gruvbox Dark', file: 'css/themes/gruvbox-dark.css' }, 'gruvbox-light': { name: 'Gruvbox Light', file: 'css/themes/gruvbox-light.css' }, 'mix-monokai-gruvbox': { name: 'Mix Monokai-Gruvbox', file: 'css/themes/mix-monokai-gruvbox.css' } }; /** * Get the current theme from localStorage * @returns {string} Theme identifier */ function getCurrentTheme() { return localStorage.getItem(THEME_STORAGE_KEY) || DEFAULT_THEME; } /** * Set the current theme in localStorage * @param {string} theme - Theme identifier */ function setCurrentTheme(theme) { if (!THEMES[theme]) { console.warn(`Theme "${theme}" not found, using default`); theme = DEFAULT_THEME; } localStorage.setItem(THEME_STORAGE_KEY, theme); } /** * Load a theme CSS file * @param {string} theme - Theme identifier */ function loadTheme(theme) { if (!THEMES[theme]) { console.warn(`Theme "${theme}" not found, using default`); theme = DEFAULT_THEME; } // Remove existing theme link if present const existingThemeLink = document.getElementById('theme-stylesheet'); if (existingThemeLink) { existingThemeLink.remove(); } // Create new theme link const themeLink = document.createElement('link'); themeLink.id = 'theme-stylesheet'; themeLink.rel = 'stylesheet'; themeLink.href = THEMES[theme].file; // Insert after the last stylesheet or in the head const lastStylesheet = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]')).pop(); if (lastStylesheet) { lastStylesheet.after(themeLink); } else { document.head.appendChild(themeLink); } // Update body data attribute for theme-specific styling document.body.setAttribute('data-theme', theme); } /** * Apply theme and save preference * @param {string} theme - Theme identifier */ function applyTheme(theme) { setCurrentTheme(theme); loadTheme(theme); // Dispatch custom event for theme change const event = new CustomEvent('themeChanged', { detail: { theme, themeName: THEMES[theme].name } }); window.dispatchEvent(event); } /** * Initialize theme on page load */ function initTheme() { const currentTheme = getCurrentTheme(); loadTheme(currentTheme); } // Initialize theme immediately initTheme(); // Export API to window window.ThemeManager = { getCurrentTheme, setCurrentTheme, loadTheme, applyTheme, themes: THEMES, defaultTheme: DEFAULT_THEME }; })();