Hermes/FlowPilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: light theme default + dark/light toggle

Browse Source 
- Light theme: clean white (#fff) base, soft gray surfaces, professional feel
- Dark theme: deep navy (#0f1117), elevated layers, subtle shadows
- Theme toggle button (moon/sun icons) in header, persists via localStorage
- Auto-detects system prefers-color-scheme on first visit
- CSS variables for all colors, both themes defined in same file
- Improved contrast ratios for both modes (WCAG AA)
This commit is contained in:
unknown
2026-04-05 09:51:41 +08:00
parent 053a2188bc
commit 5d6b2789b1
3 changed files with 214 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sidepanel/sidepanel.html
+9 -1
View File
@@ -11,7 +11,7 @@
</head>
<body>
<header>
<div class="header-title">
<div class="header-left">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
@@ -27,6 +27,14 @@
<polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
</svg>
</button>
<button id="btn-theme" class="theme-toggle" title="Toggle theme">
<svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
<svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
</button>
</div>
</header>