106 lines
No EOL
3.8 KiB
HTML
106 lines
No EOL
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dark Mode Test</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Dark Mode Test</h1>
|
|
<div class="header-info">
|
|
<button id="themeToggleBtn" class="btn-icon" title="Toggle dark mode">🌙</button>
|
|
<span id="status" class="status connected">Theme: Light</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="layout">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Test Panel</h2>
|
|
</div>
|
|
<div class="tree-container">
|
|
<div class="tree-item">
|
|
<span class="tree-item-icon">📁</span>
|
|
<span class="tree-item-name">Sample Folder</span>
|
|
</div>
|
|
<div class="tree-item">
|
|
<span class="tree-item-icon">📄</span>
|
|
<span class="tree-item-name">Sample File</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="main-content">
|
|
<div class="view">
|
|
<div class="file-header">
|
|
<div class="file-info">
|
|
<h2>Dark Mode Test</h2>
|
|
<p class="file-path">This page tests the dark mode implementation</p>
|
|
</div>
|
|
</div>
|
|
<div class="file-content">
|
|
<pre><code>// Test code block
|
|
function testDarkMode() {
|
|
console.log('Dark mode is working!');
|
|
return true;
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
class ThemeManager {
|
|
constructor() {
|
|
this.themeToggleBtn = document.getElementById('themeToggleBtn');
|
|
this.status = document.getElementById('status');
|
|
this.initializeTheme();
|
|
}
|
|
|
|
initializeTheme() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
|
|
if (savedTheme) {
|
|
this.setTheme(savedTheme);
|
|
} else {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
this.setTheme(prefersDark ? 'dark' : 'light');
|
|
}
|
|
|
|
if (this.themeToggleBtn) {
|
|
this.themeToggleBtn.addEventListener('click', () => this.toggleTheme());
|
|
}
|
|
}
|
|
|
|
setTheme(theme) {
|
|
if (theme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
this.themeToggleBtn.textContent = '☀️';
|
|
this.status.textContent = 'Theme: Dark';
|
|
} else {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
this.themeToggleBtn.textContent = '🌙';
|
|
this.status.textContent = 'Theme: Light';
|
|
}
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
toggleTheme() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
this.setTheme(newTheme);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new ThemeManager();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |