mirror of
				https://github.com/XRPLF/clio.git
				synced 2025-11-04 11:55:51 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			53 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			53 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
// Toggle zwischen drei Theme-Zuständen und speichere im localStorage
 | 
						|
const THEME_CLASSES = ['theme-default', 'theme-round', 'theme-robot'];
 | 
						|
// Ermögliche das Umschalten per Button/Funktion (z.B. für onclick im HTML)
 | 
						|
function toggleThemeVariant() {
 | 
						|
	let idx = getCurrentThemeIndex();
 | 
						|
	idx = (idx + 1) % THEME_CLASSES.length;
 | 
						|
	applyThemeClass(idx);
 | 
						|
}
 | 
						|
 | 
						|
// Funktion global verfügbar machen
 | 
						|
window.toggleThemeVariant = toggleThemeVariant;
 | 
						|
 | 
						|
function getCurrentThemeIndex() {
 | 
						|
	const stored = localStorage.getItem('theme-variant');
 | 
						|
	if (stored === null) return 0;
 | 
						|
	const idx = THEME_CLASSES.indexOf(stored);
 | 
						|
	return idx === -1 ? 0 : idx;
 | 
						|
}
 | 
						|
 | 
						|
function applyThemeClass(idx) {
 | 
						|
	document.documentElement.classList.remove(...THEME_CLASSES);
 | 
						|
	if (THEME_CLASSES[idx] && THEME_CLASSES[idx] !== 'theme-default') {
 | 
						|
		document.documentElement.classList.add(THEME_CLASSES[idx]);
 | 
						|
	}
 | 
						|
	localStorage.setItem('theme-variant', THEME_CLASSES[idx] || 'theme-default');
 | 
						|
	// Select synchronisieren, falls vorhanden
 | 
						|
	const select = document.getElementById('theme-select');
 | 
						|
	if (select) select.value = THEME_CLASSES[idx];
 | 
						|
}
 | 
						|
 | 
						|
function setThemeByName(themeName) {
 | 
						|
	const idx = THEME_CLASSES.indexOf(themeName);
 | 
						|
	applyThemeClass(idx === -1 ? 0 : idx);
 | 
						|
}
 | 
						|
 | 
						|
 | 
						|
document.addEventListener('DOMContentLoaded', () => {
 | 
						|
	const select = document.getElementById('theme-select');
 | 
						|
	if (select) {
 | 
						|
		// Initialisiere Auswahl aus localStorage
 | 
						|
		const idx = getCurrentThemeIndex();
 | 
						|
		select.value = THEME_CLASSES[idx];
 | 
						|
		applyThemeClass(idx);
 | 
						|
		// Theme bei Auswahl ändern
 | 
						|
		select.addEventListener('change', e => {
 | 
						|
			setThemeByName(e.target.value);
 | 
						|
		});
 | 
						|
	} else {
 | 
						|
		// Fallback: Theme trotzdem setzen
 | 
						|
		applyThemeClass(getCurrentThemeIndex());
 | 
						|
	}
 | 
						|
});
 |