Add pseudo-dark mode while maintaining XP aesthetic

- Create CSS variables for theme customization
- Define light and dark XP color schemes
- Dark mode uses darker backgrounds, lighter text
- Maintain classic XP beveled borders and shadows
- Add moon/sun toggle button in title bar
- Implement theme switching with localStorage
- Support system color scheme preference
- Smooth transitions between themes

The dark mode keeps the Windows XP look with:
- Dark teal/navy desktop background
- Dark gray window and button faces
- Lighter text colors
- Darker gradient title bars
- All original XP styling preserved

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-04 23:49:38 -05:00
parent 60e2c49811
commit c4e9e952a5
3 changed files with 174 additions and 24 deletions

View File

@@ -13,6 +13,7 @@
<div class="title-bar">
<div class="title-bar-text">This Little Corner — Elastic Search</div>
<div class="title-bar-controls">
<button id="themeToggle" aria-label="Toggle theme" title="Toggle dark mode" style="margin-right: 4px; min-width: 24px; font-size: 14px;">🌙</button>
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>