126 lines
3.0 KiB
JavaScript
126 lines
3.0 KiB
JavaScript
/**
|
|
* 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
|
|
};
|
|
|
|
})();
|