feat: add dark theme support with CSS custom properties and Naive UI integration

Implement runtime theme switching using CSS custom properties delegated through SCSS variables, with light/dark/system modes, FOUC prevention, sidebar toggle, and settings selector. Add theme-aware video assets for sidebar and chat thinking indicator. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-16 23:13:04 +08:00
parent 076a7c2a38
commit b5aeb876b8
32 changed files with 465 additions and 126 deletions
@@ -5,6 +5,13 @@ import { i18n } from './i18n'
 import App from './App.vue'
 import './styles/global.scss'

+// Apply dark class before mount to prevent FOUC
+const savedTheme = localStorage.getItem('hermes_theme') || 'system'
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+if (savedTheme === 'dark' || (savedTheme === 'system' && prefersDark)) {
+  document.documentElement.classList.add('dark')
+}
+
 // Read token from URL BEFORE router initializes (hash router strips params)
 const urlParams = new URLSearchParams(window.location.search)
 const hashQuery = window.location.hash.split('?')[1]