135 lines
5.0 KiB
HTML
135 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Test Theme System</title>
|
||
<link rel="stylesheet" href="css/variables.css">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="stylesheet" href="css/components.css">
|
||
</head>
|
||
<body>
|
||
<div class="container" style="margin-top: 2rem;">
|
||
<div class="card">
|
||
<div class="card-header">🧪 Test du système de thèmes</div>
|
||
<div class="card-body">
|
||
<h3>Thème actuel : <span id="currentTheme" style="color: var(--color-primary);"></span></h3>
|
||
|
||
<div style="margin-top: 1rem;">
|
||
<button class="btn btn-primary" onclick="testThemes()">🧪 Tester tous les thèmes</button>
|
||
<button class="btn btn-secondary" onclick="showThemeInfo()">ℹ️ Infos du thème</button>
|
||
</div>
|
||
|
||
<div id="testResults" style="margin-top: 1rem; padding: 1rem; background: var(--bg-tertiary); border-radius: var(--radius-md);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/theme-manager.js"></script>
|
||
<script src="js/icon-manager.js"></script>
|
||
<script>
|
||
function updateCurrentTheme() {
|
||
const theme = window.ThemeManager.getCurrentTheme();
|
||
document.getElementById('currentTheme').textContent = window.ThemeManager.themes[theme].name;
|
||
}
|
||
|
||
function testThemes() {
|
||
const results = document.getElementById('testResults');
|
||
results.innerHTML = '<h4>Tests en cours...</h4>';
|
||
|
||
let html = '<h4 style="color: var(--color-success);">✓ Tests réussis</h4><ul>';
|
||
|
||
// Test 1: ThemeManager exists
|
||
html += '<li>✓ ThemeManager est disponible</li>';
|
||
|
||
// Test 2: All themes are loaded
|
||
const themes = Object.keys(window.ThemeManager.themes);
|
||
html += `<li>✓ ${themes.length} thèmes chargés: ${themes.join(', ')}</li>`;
|
||
|
||
// Test 3: Default theme
|
||
const defaultTheme = window.ThemeManager.defaultTheme;
|
||
html += `<li>✓ Thème par défaut: ${defaultTheme}</li>`;
|
||
|
||
// Test 4: Current theme
|
||
const currentTheme = window.ThemeManager.getCurrentTheme();
|
||
html += `<li>✓ Thème actuel: ${currentTheme}</li>`;
|
||
|
||
// Test 5: CSS variables
|
||
const styles = getComputedStyle(document.documentElement);
|
||
const bgPrimary = styles.getPropertyValue('--bg-primary').trim();
|
||
const colorPrimary = styles.getPropertyValue('--color-primary').trim();
|
||
html += `<li>✓ Variables CSS chargées (--bg-primary: ${bgPrimary}, --color-primary: ${colorPrimary})</li>`;
|
||
|
||
html += '</ul>';
|
||
|
||
html += '<h4 style="margin-top: 1rem;">🎨 Test de changement de thème</h4>';
|
||
html += '<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem;">';
|
||
|
||
themes.forEach(theme => {
|
||
html += `<button class="btn btn-sm ${currentTheme === theme ? 'btn-primary' : 'btn-secondary'}"
|
||
onclick="testApplyTheme('${theme}')">
|
||
${window.ThemeManager.themes[theme].name}
|
||
</button>`;
|
||
});
|
||
|
||
html += '</div>';
|
||
results.innerHTML = html;
|
||
}
|
||
|
||
function testApplyTheme(theme) {
|
||
window.ThemeManager.applyTheme(theme);
|
||
updateCurrentTheme();
|
||
testThemes();
|
||
}
|
||
|
||
function showThemeInfo() {
|
||
const results = document.getElementById('testResults');
|
||
const currentTheme = window.ThemeManager.getCurrentTheme();
|
||
const themeInfo = window.ThemeManager.themes[currentTheme];
|
||
|
||
const styles = getComputedStyle(document.documentElement);
|
||
|
||
let html = `<h4>Informations du thème: ${themeInfo.name}</h4>`;
|
||
html += `<p><strong>Fichier:</strong> ${themeInfo.file}</p>`;
|
||
html += '<h5 style="margin-top: 1rem;">Variables CSS:</h5>';
|
||
html += '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem;">';
|
||
|
||
const variables = [
|
||
'--bg-primary',
|
||
'--bg-secondary',
|
||
'--bg-tertiary',
|
||
'--text-primary',
|
||
'--text-secondary',
|
||
'--color-success',
|
||
'--color-warning',
|
||
'--color-danger',
|
||
'--color-info',
|
||
'--color-primary',
|
||
'--border-color'
|
||
];
|
||
|
||
variables.forEach(varName => {
|
||
const value = styles.getPropertyValue(varName).trim();
|
||
html += `<div style="padding: 0.5rem; background: var(--bg-primary); border-radius: 4px;">
|
||
<strong style="font-size: 0.8rem;">${varName}:</strong><br>
|
||
<span style="font-family: monospace; font-size: 0.9rem;">${value}</span>
|
||
<div style="width: 100%; height: 20px; background: ${value}; margin-top: 0.25rem; border-radius: 4px; border: 1px solid var(--border-color);"></div>
|
||
</div>`;
|
||
});
|
||
|
||
html += '</div>';
|
||
results.innerHTML = html;
|
||
}
|
||
|
||
// Listen for theme changes
|
||
window.addEventListener('themeChanged', (event) => {
|
||
console.log('Thème changé:', event.detail);
|
||
updateCurrentTheme();
|
||
});
|
||
|
||
// Initialize
|
||
updateCurrentTheme();
|
||
</script>
|
||
</body>
|
||
</html>
|