ps/cvs-proxy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark mode UI and update components

Browse source
This commit is contained in:
Juan José Gutiérrez de Quevedo Pérez 2025-11-21 13:09:47 +01:00
parent f2817bc1f1
commit c263092c10
9 changed files with 488 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

106
ui/test-dark-mode.html Normal file
View file

@ -0,0 +1,106 @@
<!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>