Merge branch 'feat/dark-theme' into dev

packages/client/src/App.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { NConfigProvider, NMessageProvider, NDialogProvider, NNotificationProvider } from 'naive-ui'
-import { themeOverrides } from '@/styles/theme'
+import { darkTheme, NConfigProvider, NMessageProvider, NDialogProvider, NNotificationProvider } from 'naive-ui'
+import { getThemeOverrides } from '@/styles/theme'
+import { useTheme } from '@/composables/useTheme'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import { useKeyboard } from '@/composables/useKeyboard'
 import { useAppStore } from '@/stores/hermes/app'
 
+const { isDark } = useTheme()
 const appStore = useAppStore()
 const route = useRoute()
 const router = useRouter()
 const ready = ref(false)
 
+const themeOverrides = computed(() => getThemeOverrides(isDark.value))
+const naiveTheme = computed(() => isDark.value ? darkTheme : null)
+
 const isLoginPage = computed(() => route.name === 'login')
 
 // Close mobile sidebar on route change
@@ -39,7 +44,7 @@ useKeyboard()
 </script>
 
 <template>
-  <NConfigProvider :theme-overrides="themeOverrides">
+  <NConfigProvider :theme="naiveTheme" :theme-overrides="themeOverrides">
     <NMessageProvider>
       <NDialogProvider>
         <NNotificationProvider>

packages/client/src/components/hermes/chat/ChatInput.vue

@@ -331,7 +331,7 @@ function isImage(type: string): boolean {
   border-radius: 50%;
   border: none;
   background: rgba(0, 0, 0, 0.5);
-  color: #fff;
+  color: var(--text-on-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -394,8 +394,8 @@ function isImage(type: string): boolean {
 
 // Drag-over state
 .input-wrapper.drag-over {
-  border-color: #4a90d9;
+  border-color: var(--accent-info);
   border-style: dashed;
-  background-color: rgba(74, 144, 217, 0.04);
+  background-color: rgba(var(--accent-info-rgb), 0.04);
 }
 </style>

packages/client/src/components/hermes/chat/MarkdownRenderer.vue

@@ -105,7 +105,7 @@ const renderedHtml = computed(() => md.render(props.content))
     }
 
     th {
-      background: rgba($accent-primary, 0.08);
+      background: rgba(var(--accent-primary-rgb), 0.08);
       color: $text-primary;
       font-weight: 600;
     }
@@ -189,4 +189,20 @@ const renderedHtml = computed(() => md.render(props.content))
 .hljs-title\.function_ { color: #1a1a1a; }
 .hljs-params { color: #2a2a2a; }
 .hljs-meta { color: #999999; }
+
+// Dark mode highlight.js — inverted pure ink
+.dark .hljs { color: #d0d0d0; }
+.dark .hljs-keyword,
+.dark .hljs-selector-tag { color: #f0f0f0; font-weight: 600; }
+.dark .hljs-string,
+.dark .hljs-attr { color: #aaaaaa; }
+.dark .hljs-number { color: #cccccc; }
+.dark .hljs-comment { color: #666666; font-style: italic; }
+.dark .hljs-built_in { color: #bbbbbb; }
+.dark .hljs-type { color: #c6c6c6; }
+.dark .hljs-variable { color: #f0f0f0; }
+.dark .hljs-title,
+.dark .hljs-title\.function_ { color: #f0f0f0; }
+.dark .hljs-params { color: #d0d0d0; }
+.dark .hljs-meta { color: #666666; }
 </style>

packages/client/src/components/hermes/chat/MessageItem.vue

@@ -201,7 +201,7 @@ const formattedToolResult = computed(() => {
 
     .message-bubble {
       background-color: $msg-user-bg;
-      border-radius: $radius-md $radius-md 4px $radius-md;
+      border-radius: 10px;
     }
   }
 
@@ -223,7 +223,7 @@ const formattedToolResult = computed(() => {
 
     .message-bubble {
       background-color: $msg-assistant-bg;
-      border-radius: $radius-md $radius-md $radius-md 4px;
+      border-radius: 10px;
     }
   }
 
@@ -238,7 +238,7 @@ const formattedToolResult = computed(() => {
       border-left: 3px solid $warning;
       border-radius: $radius-sm;
       max-width: 80%;
-      background-color: rgba($warning, 0.06);
+      background-color: rgba(var(--warning-rgb), 0.06);
     }
   }
 }
@@ -261,6 +261,7 @@ const formattedToolResult = computed(() => {
   font-size: 14px;
   line-height: 1.65;
   word-break: break-word;
+  border-radius: 10px;
 }
 
 .msg-attachments {
@@ -315,6 +316,10 @@ const formattedToolResult = computed(() => {
   color: $text-muted;
   margin-top: 4px;
   padding: 0 4px;
+
+  .dark & {
+    color: #999999;
+  }
 }
 
 .tool-line {
@@ -369,7 +374,7 @@ const formattedToolResult = computed(() => {
 .tool-error-badge {
   font-size: 9px;
   color: $error;
-  background: rgba($error, 0.08);
+  background: rgba(var(--error-rgb), 0.08);
   padding: 0 4px;
   border-radius: 3px;
   line-height: 14px;

packages/client/src/components/hermes/chat/MessageList.vue

@@ -1,58 +1,75 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
-import { useI18n } from 'vue-i18n'
-import MessageItem from './MessageItem.vue'
-import { useChatStore } from '@/stores/hermes/chat'
-import thinkingVideo from '@/assets/thinking.mp4'
+import { ref, computed, watch, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
+import MessageItem from "./MessageItem.vue";
+import { useChatStore } from "@/stores/hermes/chat";
+import thinkingVideoLight from "@/assets/thinking-light.mp4";
+import thinkingVideoDark from "@/assets/thinking-dark.mp4";
+import { useTheme } from "@/composables/useTheme";
 
-const chatStore = useChatStore()
-const { t } = useI18n()
-const listRef = ref<HTMLElement>()
+const chatStore = useChatStore();
+const { t } = useI18n();
+const { isDark } = useTheme();
+const listRef = ref<HTMLElement>();
 
 const displayMessages = computed(() =>
-  chatStore.messages.filter(m => m.role !== 'tool'),
-)
+  chatStore.messages.filter((m) => m.role !== "tool"),
+);
 
 const currentToolCalls = computed(() => {
-  const msgs = chatStore.messages
+  const msgs = chatStore.messages;
   // Find the last user message index
-  let lastUserIdx = -1
+  let lastUserIdx = -1;
   for (let i = msgs.length - 1; i >= 0; i--) {
-    if (msgs[i].role === 'user') { lastUserIdx = i; break }
+    if (msgs[i].role === "user") {
+      lastUserIdx = i;
+      break;
+    }
   }
   // Only tool calls after the last user message, newest on top
-  const tools = msgs.filter((m, i) => m.role === 'tool' && i > lastUserIdx)
-  return [...tools].reverse()
-})
+  const tools = msgs.filter((m, i) => m.role === "tool" && i > lastUserIdx);
+  return [...tools].reverse();
+});
 
 function scrollToBottom() {
   nextTick(() => {
     if (listRef.value) {
-      listRef.value.scrollTop = listRef.value.scrollHeight
+      listRef.value.scrollTop = listRef.value.scrollHeight;
     }
-  })
+  });
 }
 
-watch(() => chatStore.messages.length, scrollToBottom)
-watch(() => chatStore.messages[chatStore.messages.length - 1]?.content, scrollToBottom)
-watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
-watch(currentToolCalls, scrollToBottom)
+watch(() => chatStore.messages.length, scrollToBottom);
+watch(
+  () => chatStore.messages[chatStore.messages.length - 1]?.content,
+  scrollToBottom,
+);
+watch(
+  () => chatStore.isStreaming,
+  (v) => {
+    if (v) scrollToBottom();
+  },
+);
+watch(currentToolCalls, scrollToBottom);
 </script>
 
 <template>
   <div ref="listRef" class="message-list">
     <div v-if="chatStore.messages.length === 0" class="empty-state">
       <img src="/logo.png" alt="Hermes" class="empty-logo" />
-      <p>{{ t('chat.emptyState') }}</p>
+      <p>{{ t("chat.emptyState") }}</p>
     </div>
-    <MessageItem
-      v-for="msg in displayMessages"
-      :key="msg.id"
-      :message="msg"
-    />
+    <MessageItem v-for="msg in displayMessages" :key="msg.id" :message="msg" />
     <Transition name="fade">
       <div v-if="chatStore.isStreaming" class="streaming-indicator">
-        <video :src="thinkingVideo" autoplay loop muted playsinline class="thinking-video" />
+        <video
+          :src="isDark ? thinkingVideoDark : thinkingVideoLight"
+          autoplay
+          loop
+          muted
+          playsinline
+          class="thinking-video"
+        />
         <div v-if="currentToolCalls.length > 0" class="tool-calls-panel">
           <div
             v-for="tc in currentToolCalls"
@@ -68,12 +85,21 @@ watch(currentToolCalls, scrollToBottom)
               stroke-width="1.5"
               class="tool-call-icon"
             >
-              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+              <path
+                d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+              />
             </svg>
             <span class="tool-call-name">{{ tc.toolName }}</span>
-            <span v-if="tc.toolPreview" class="tool-call-preview">{{ tc.toolPreview }}</span>
-            <span v-if="tc.toolStatus === 'running'" class="tool-call-spinner"></span>
-            <span v-if="tc.toolStatus === 'error'" class="tool-call-error">{{ t('chat.error') }}</span>
+            <span v-if="tc.toolPreview" class="tool-call-preview">{{
+              tc.toolPreview
+            }}</span>
+            <span
+              v-if="tc.toolStatus === 'running'"
+              class="tool-call-spinner"
+            ></span>
+            <span v-if="tc.toolStatus === 'error'" class="tool-call-error">{{
+              t("chat.error")
+            }}</span>
           </div>
         </div>
       </div>
@@ -82,7 +108,7 @@ watch(currentToolCalls, scrollToBottom)
 </template>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as *;
+@use "@/styles/variables" as *;
 
 .message-list {
   flex: 1;
@@ -91,7 +117,11 @@ watch(currentToolCalls, scrollToBottom)
   display: flex;
   flex-direction: column;
   gap: 16px;
-  background-color: #ffffff;
+  background-color: $bg-card;
+
+  .dark & {
+    background-color: #333333;
+  }
 }
 
 .empty-state {
@@ -128,10 +158,9 @@ watch(currentToolCalls, scrollToBottom)
   align-items: flex-start;
   gap: 12px;
   padding: 4px;
-
   .thinking-video {
     width: 120px;
-    height: 120px;
+    height: 213px;
     border-radius: $radius-md;
     object-fit: contain;
     flex-shrink: 0;
@@ -147,7 +176,9 @@ watch(currentToolCalls, scrollToBottom)
   padding-top: 4px;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  &::-webkit-scrollbar { display: none; }
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .tool-call-item {
@@ -199,6 +230,8 @@ watch(currentToolCalls, scrollToBottom)
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

packages/client/src/components/hermes/jobs/JobCard.vue

@@ -152,7 +152,7 @@ async function handleDelete() {
   transition: border-color $transition-fast;
 
   &:hover {
-    border-color: rgba($accent-primary, 0.3);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
   }
 }
 
@@ -180,22 +180,22 @@ async function handleDelete() {
   font-weight: 500;
 
   &.success {
-    background: rgba($success, 0.12);
+    background: rgba(var(--success-rgb), 0.12);
     color: $success;
   }
 
   &.info {
-    background: rgba($accent-primary, 0.12);
+    background: rgba(var(--accent-primary-rgb), 0.12);
     color: $accent-primary;
   }
 
   &.warning {
-    background: rgba($warning, 0.12);
+    background: rgba(var(--warning-rgb), 0.12);
     color: $warning;
   }
 
   &.error {
-    background: rgba($error, 0.12);
+    background: rgba(var(--error-rgb), 0.12);
     color: $error;
   }
 }

packages/client/src/components/hermes/models/ProviderCard.vue

@@ -70,7 +70,7 @@ async function handleDelete() {
   transition: border-color $transition-fast;
 
   &:hover {
-    border-color: rgba($accent-primary, 0.3);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
   }
 }
 
@@ -98,12 +98,12 @@ async function handleDelete() {
   font-weight: 500;
 
   &.builtin {
-    background: rgba($accent-primary, 0.12);
+    background: rgba(var(--accent-primary-rgb), 0.12);
     color: $accent-primary;
   }
 
   &.custom {
-    background: rgba($success, 0.12);
+    background: rgba(var(--success-rgb), 0.12);
     color: $success;
   }
 }

packages/client/src/components/hermes/profiles/ProfileCard.vue

@@ -181,11 +181,11 @@ async function handleExport() {
   transition: border-color $transition-fast;
 
   &:hover {
-    border-color: rgba($accent-primary, 0.3);
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
   }
 
   &.active {
-    border-color: rgba($success, 0.4);
+    border-color: rgba(var(--success-rgb), 0.4);
   }
 }
 

packages/client/src/components/hermes/settings/DisplaySettings.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
-import { NSwitch, useMessage } from 'naive-ui'
+import { NSwitch, NSelect, useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
+import { useTheme, type ThemeMode } from '@/composables/useTheme'
 import SettingRow from './SettingRow.vue'
 
 const settingsStore = useSettingsStore()
 const message = useMessage()
 const { t } = useI18n()
+const { mode, setMode } = useTheme()
+
+const themeOptions = [
+  { label: t('settings.display.themeLight'), value: 'light' },
+  { label: t('settings.display.themeDark'), value: 'dark' },
+  { label: t('settings.display.themeSystem'), value: 'system' },
+]
 
 async function save(values: Record<string, any>) {
   try {
@@ -16,10 +24,19 @@ async function save(values: Record<string, any>) {
     message.error(t('settings.saveFailed'))
   }
 }
+
+function handleThemeChange(val: string) {
+  const m = val as ThemeMode
+  setMode(m)
+  save({ skin: m })
+}
 </script>
 
 <template>
   <section class="settings-section">
+    <SettingRow :label="t('settings.display.theme')" :hint="t('settings.display.themeHint')">
+      <NSelect :value="mode" :options="themeOptions" size="small" :consistent-menu-width="false" class="input-sm" @update:value="handleThemeChange" />
+    </SettingRow>
     <SettingRow :label="t('settings.display.streaming')" :hint="t('settings.display.streamingHint')">
       <NSwitch :value="settingsStore.display.streaming" @update:value="v => save({ streaming: v })" />
     </SettingRow>

packages/client/src/components/hermes/settings/PlatformCard.vue

@@ -57,7 +57,7 @@ const configured = computed(() => {
   overflow: hidden;
 
   &.configured {
-    border-color: rgba($success, 0.2);
+    border-color: rgba(var(--success-rgb), 0.2);
   }
 }
 
@@ -70,7 +70,7 @@ const configured = computed(() => {
   user-select: none;
 
   &:hover {
-    background-color: rgba($text-primary, 0.03);
+    background-color: rgba(var(--text-primary-rgb), 0.03);
   }
 }
 

packages/client/src/components/hermes/skills/SkillDetail.vue

@@ -185,7 +185,7 @@ watch(() => `${props.category}/${props.skill}`, loadSkill, { immediate: true })
   border-radius: 4px;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
   }
 }
 

packages/client/src/components/hermes/skills/SkillList.vue

@@ -150,7 +150,7 @@ async function handleToggle(category: string, skillName: string, newEnabled: boo
   border-radius: $radius-sm;
 
   &:hover {
-    background: rgba($accent-primary, 0.04);
+    background: rgba(var(--accent-primary-rgb), 0.04);
   }
 }
 
@@ -174,7 +174,7 @@ async function handleToggle(category: string, skillName: string, newEnabled: boo
 .category-count {
   font-size: 11px;
   color: $text-muted;
-  background: rgba($accent-primary, 0.06);
+  background: rgba(var(--accent-primary-rgb), 0.06);
   padding: 1px 6px;
   border-radius: 8px;
 }
@@ -200,12 +200,12 @@ async function handleToggle(category: string, skillName: string, newEnabled: boo
   gap: 8px;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
     color: $text-primary;
   }
 
   &.active {
-    background: rgba($accent-primary, 0.1);
+    background: rgba(var(--accent-primary-rgb), 0.1);
     color: $text-primary;
     font-weight: 500;
   }

packages/client/src/components/hermes/usage/DailyTrend.vue

@@ -127,6 +127,10 @@ import { computed } from 'vue'
   border-radius: 2px 2px 0 0;
   min-height: 0;
   transition: height 0.3s ease;
+
+  .dark & {
+    background: #66bb6a;
+  }
 }
 
 .bar-col {
@@ -140,7 +144,7 @@ import { computed } from 'vue'
   left: 50%;
   transform: translateX(-50%);
   background: $text-primary;
-  color: #fff;
+  color: var(--text-on-accent);
   padding: 6px 10px;
   border-radius: $radius-sm;
   font-size: 11px;

packages/client/src/components/hermes/usage/ModelBreakdown.vue

@@ -85,6 +85,10 @@ function formatTokens(n: number): string {
   border-radius: 3px;
   min-width: 2px;
   transition: width 0.3s ease;
+
+  .dark & {
+    background: #66bb6a;
+  }
 }
 
 .model-tokens {

packages/client/src/components/layout/AppSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useMessage } from "naive-ui";
@@ -7,62 +7,20 @@ import { useAppStore } from "@/stores/hermes/app";
 import ModelSelector from "./ModelSelector.vue";
 import ProfileSelector from "./ProfileSelector.vue";
 import LanguageSwitch from "./LanguageSwitch.vue";
-import danceVideo from "@/assets/dance.mp4";
+import ThemeSwitch from "./ThemeSwitch.vue";
+import danceVideoLight from "@/assets/dance-light.mp4";
+import danceVideoDark from "@/assets/dance-dark.mp4";
+
+import { useTheme } from "@/composables/useTheme";
 
 const { t } = useI18n();
+const { isDark } = useTheme();
 const message = useMessage();
 const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore();
-const canvasRef = ref<HTMLCanvasElement>();
-
 const selectedKey = computed(() => route.name as string);
 
-onMounted(() => {
-  const canvas = canvasRef.value;
-  if (!canvas) return;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return;
-
-  const video = document.createElement("video");
-  video.src = danceVideo;
-  video.muted = true;
-  video.playsInline = true;
-  video.autoplay = true;
-
-  video.addEventListener("loadeddata", () => {
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-  });
-
-  function draw() {
-    if (video.readyState >= 2 && ctx && canvas) {
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    }
-    if (video.currentTime >= video.duration - 0.05) {
-      video.currentTime = 0;
-    }
-    requestAnimationFrame(draw);
-  }
-
-  video.addEventListener("canplay", () => {
-    draw();
-  });
-
-  video.play();
-
-  const onVisible = () => {
-    if (document.visibilityState === "visible" && video.paused) {
-      video.play();
-    }
-  };
-  document.addEventListener("visibilitychange", onVisible);
-
-  onUnmounted(() => {
-    document.removeEventListener("visibilitychange", onVisible);
-  });
-});
-
 function handleNav(key: string) {
   router.push({ name: key });
 }
@@ -82,7 +40,7 @@ async function handleUpdate() {
     <div class="sidebar-logo" @click="router.push('/hermes/chat')">
       <img src="/logo.png" alt="Hermes" class="logo-img" />
       <span class="logo-text">Hermes</span>
-      <canvas ref="canvasRef" class="logo-dance" />
+      <video class="logo-dance" :src="isDark ? danceVideoDark : danceVideoLight" autoplay loop muted playsinline />
     </div>
 
     <nav class="sidebar-nav">
@@ -360,6 +318,7 @@ async function handleUpdate() {
       </div>
       <div class="version-info">
         <span>Hermes Web UI v{{ appStore.serverVersion || "0.1.0" }}</span>
+        <ThemeSwitch />
         <a v-if="appStore.updateAvailable" class="update-hint" :class="{ loading: appStore.updating }" @click="handleUpdate">
           {{ appStore.updating ? t('sidebar.updating') : t('sidebar.updateVersion', { version: appStore.latestVersion }) }}
         </a>
@@ -398,8 +357,12 @@ async function handleUpdate() {
   margin: 0 -12px;
   color: $text-primary;
   cursor: pointer;
-  background-color: #ffffff;
+  background-color: $bg-card;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  .dark & {
+    background-color: #393939;
+  }
   position: relative;
   overflow: hidden;
 
@@ -419,6 +382,7 @@ async function handleUpdate() {
     object-fit: contain;
     flex-shrink: 0;
     width: auto;
+    pointer-events: none;
   }
 }
 
@@ -453,12 +417,12 @@ async function handleUpdate() {
   text-align: left;
 
   &:hover {
-    background-color: rgba($accent-primary, 0.06);
+    background-color: rgba(var(--accent-primary-rgb), 0.06);
     color: $text-primary;
   }
 
   &.active {
-    background-color: rgba($accent-primary, 0.12);
+    background-color: rgba(var(--accent-primary-rgb), 0.12);
     color: $accent-primary;
   }
 }
@@ -490,7 +454,7 @@ async function handleUpdate() {
 
   &.connected .status-dot {
     background-color: $success;
-    box-shadow: 0 0 6px rgba($success, 0.5);
+    box-shadow: 0 0 6px rgba(var(--success-rgb), 0.5);
   }
 
   &.disconnected .status-dot {
@@ -507,8 +471,9 @@ async function handleUpdate() {
   font-size: 11px;
   color: $text-muted;
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .update-hint {
@@ -516,15 +481,15 @@ async function handleUpdate() {
   margin-top: 4px;
   padding: 5px 10px;
   border-radius: $radius-sm;
-  background: #333333;
-  color: rgba(#fff, 0.7);
+  background: var(--accent-primary);
+  color: rgba(255, 255, 255, 0.7);
   font-size: 11px;
   text-align: center;
   cursor: pointer;
   transition: background $transition-fast;
 
   &:hover {
-    background: #3d3d3d;
+    background: var(--accent-hover);
   }
 
   &.loading {

packages/client/src/components/layout/ThemeSwitch.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useTheme } from '@/composables/useTheme'
+
+const { isDark, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button class="theme-switch" :title="isDark ? 'Light mode' : 'Dark mode'" @click="toggleTheme">
+    <!-- Sun icon (shown in dark mode) -->
+    <svg v-if="isDark" 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>
+    <!-- Moon icon (shown in light mode) -->
+    <svg v-else 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>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.theme-switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    background: rgba(var(--accent-primary-rgb), 0.06);
+  }
+}
+</style>

packages/client/src/composables/useTheme.ts

@@ -0,0 +1,57 @@
+import { ref, watch } from 'vue'
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'hermes_theme'
+
+const mode = ref<ThemeMode>(
+  (localStorage.getItem(STORAGE_KEY) as ThemeMode) || 'system',
+)
+
+const isDark = ref(false)
+
+function applyTheme(dark: boolean) {
+  isDark.value = dark
+  document.documentElement.classList.toggle('dark', dark)
+}
+
+function resolveDark(m: ThemeMode): boolean {
+  if (m === 'system') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+  return m === 'dark'
+}
+
+// Initial resolve
+applyTheme(resolveDark(mode.value))
+
+// Listen for system preference changes
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+mediaQuery.addEventListener('change', () => {
+  if (mode.value === 'system') {
+    applyTheme(true)
+  }
+})
+
+// Watch mode changes
+watch(mode, (newMode) => {
+  localStorage.setItem(STORAGE_KEY, newMode)
+  applyTheme(resolveDark(newMode))
+})
+
+export function useTheme() {
+  function setMode(m: ThemeMode) {
+    mode.value = m
+  }
+
+  function toggleTheme() {
+    mode.value = isDark.value ? 'light' : 'dark'
+  }
+
+  return {
+    mode,
+    isDark,
+    setMode,
+    toggleTheme,
+  }
+}

packages/client/src/i18n/locales/en.ts

@@ -292,6 +292,11 @@ export default {
       bellOnCompleteHint: 'Play sound when AI finishes',
       busyInputMode: 'Busy Input Mode',
       busyInputModeHint: 'Allow input while AI is processing',
+      theme: 'Theme',
+      themeHint: 'Choose light, dark, or follow system preference',
+      themeLight: 'Light',
+      themeDark: 'Dark',
+      themeSystem: 'System',
     },
     agent: {
       maxTurns: 'Max Turns',

packages/client/src/i18n/locales/zh.ts

@@ -292,6 +292,11 @@ export default {
       bellOnCompleteHint: 'AI 回复完成时播放提示音',
       busyInputMode: '忙碌输入模式',
       busyInputModeHint: 'AI 处理中仍可输入',
+      theme: '主题',
+      themeHint: '选择浅色、暗色或跟随系统',
+      themeLight: '浅色',
+      themeDark: '暗色',
+      themeSystem: '跟随系统',
     },
     agent: {
       maxTurns: '最大轮次',

packages/client/src/main.ts

@@ -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]

packages/client/src/styles/global.scss

@@ -19,6 +19,15 @@
   }
 }
 
+// Theme transition (applied programmatically on toggle, not on load)
+html.theme-transitioning,
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
+              box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
+}
+
 html, body, #app {
   height: 100%;
   width: 100%;
@@ -67,7 +76,7 @@ a {
 }
 
 ::selection {
-  background: rgba($accent-primary, 0.3);
+  background: rgba(var(--accent-primary-rgb), 0.3);
 }
 
 // Shared page header

packages/client/src/styles/theme.ts

@@ -1,6 +1,6 @@
 import type { GlobalThemeOverrides } from 'naive-ui'
 
-export const themeOverrides: GlobalThemeOverrides = {
+export const lightThemeOverrides: GlobalThemeOverrides = {
   common: {
     primaryColor: '#333333',
     primaryColorHover: '#1a1a1a',
@@ -69,3 +69,83 @@ export const themeOverrides: GlobalThemeOverrides = {
     borderRadius: '6px',
   },
 }
+
+export const darkThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#e0e0e0',
+    primaryColorHover: '#f5f5f5',
+    primaryColorPressed: '#ffffff',
+    primaryColorSuppl: '#e0e0e0',
+    bodyColor: '#1a1a1a',
+    cardColor: '#2a2a2a',
+    modalColor: '#2a2a2a',
+    popoverColor: '#2a2a2a',
+    tableColor: '#2a2a2a',
+    inputColor: '#2a2a2a',
+    actionColor: '#252525',
+    textColorBase: '#e0e0e0',
+    textColor1: '#e0e0e0',
+    textColor2: '#a0a0a0',
+    textColor3: '#666666',
+    dividerColor: '#3a3a3a',
+    borderColor: '#3a3a3a',
+    hoverColor: 'rgba(255, 255, 255, 0.06)',
+    borderRadius: '8px',
+    borderRadiusSmall: '6px',
+    fontSize: '14px',
+    fontSizeMedium: '14px',
+    heightMedium: '36px',
+    fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
+    fontFamilyMono: 'JetBrains Mono, Fira Code, Consolas, monospace',
+  },
+  Layout: {
+    color: '#1a1a1a',
+    siderColor: '#202020',
+    headerColor: '#1a1a1a',
+  },
+  Menu: {
+    itemTextColorActive: '#e0e0e0',
+    itemTextColorActiveHover: '#e0e0e0',
+    itemTextColorChildActive: '#e0e0e0',
+    itemIconColorActive: '#e0e0e0',
+    itemIconColorActiveHover: '#ffffff',
+    itemColorActive: 'rgba(255, 255, 255, 0.08)',
+    itemColorActiveHover: 'rgba(255, 255, 255, 0.12)',
+    arrowColorActive: '#e0e0e0',
+  },
+  Button: {
+    textColorPrimary: '#1a1a1a',
+    colorPrimary: '#e0e0e0',
+    colorHoverPrimary: '#f5f5f5',
+    colorPressedPrimary: '#ffffff',
+  },
+  Input: {
+    color: '#2a2a2a',
+    colorFocus: '#2a2a2a',
+    border: '1px solid #3a3a3a',
+    borderHover: '1px solid #666666',
+    borderFocus: '1px solid #e0e0e0',
+    placeholderColor: '#666666',
+    caretColor: '#e0e0e0',
+  },
+  Card: {
+    color: '#2a2a2a',
+    borderColor: '#3a3a3a',
+  },
+  Modal: {
+    color: '#2a2a2a',
+  },
+  Tag: {
+    borderRadius: '6px',
+  },
+  Switch: {
+    railColor: '#3a3a3a',
+    railColorActive: '#66bb6a',
+    loadingColor: '#e0e0e0',
+    opacityDisabled: 0.4,
+  },
+}
+
+export function getThemeOverrides(isDark: boolean): GlobalThemeOverrides {
+  return isDark ? darkThemeOverrides : lightThemeOverrides
+}

packages/client/src/styles/variables.scss

@@ -1,41 +1,150 @@
 // 黑白水墨 — Pure Ink
 // 纯黑白灰，无彩色
+// 支持 light / dark 双主题
+
+// ─── CSS Custom Properties ─────────────────────────────────────
+
+:root {
+  // Backgrounds
+  --bg-primary: #fafafa;
+  --bg-secondary: #f0f0f0;
+  --bg-sidebar: #f5f5f5;
+  --bg-card: #ffffff;
+  --bg-card-hover: #fafafa;
+  --bg-input: #ffffff;
+
+  // Borders
+  --border-color: #e0e0e0;
+  --border-light: #ebebeb;
+
+  // Accent
+  --accent-primary: #333333;
+  --accent-hover: #1a1a1a;
+  --accent-muted: #888888;
+
+  // Text
+  --text-primary: #1a1a1a;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+
+  // Status
+  --success: #2e7d32;
+  --error: #c62828;
+  --warning: #f57f17;
+
+  // Message bubbles
+  --msg-user-bg: #f5f5f5;
+  --msg-assistant-bg: #f5f5f5;
+  --msg-system-border: #bdbdbd;
+
+  // Code
+  --code-bg: #f4f4f4;
+
+  // Utility
+  --text-on-accent: #ffffff;
+  --text-on-overlay: #ffffff;
+  --accent-info: #4a90d9;
+
+  // RGB components (for rgba() usage)
+  --accent-primary-rgb: 51, 51, 51;
+  --accent-hover-rgb: 26, 26, 26;
+  --text-primary-rgb: 26, 26, 26;
+  --text-muted-rgb: 153, 153, 153;
+  --success-rgb: 46, 125, 50;
+  --error-rgb: 198, 40, 40;
+  --warning-rgb: 245, 127, 23;
+  --accent-info-rgb: 74, 144, 217;
+}
+
+.dark {
+  // Backgrounds
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #252525;
+  --bg-sidebar: #202020;
+  --bg-card: #333333;
+  --bg-card-hover: #333333;
+  --bg-input: #2a2a2a;
+
+  // Borders
+  --border-color: #3a3a3a;
+  --border-light: #333333;
+
+  // Accent
+  --accent-primary: #e0e0e0;
+  --accent-hover: #f5f5f5;
+  --accent-muted: #888888;
+
+  // Text
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --text-muted: #666666;
+
+  // Status
+  --success: #66bb6a;
+  --error: #ef5350;
+  --warning: #ffb74d;
+
+  // Message bubbles
+  --msg-user-bg: #252525;
+  --msg-assistant-bg: #252525;
+  --msg-system-border: #555555;
+
+  // Code
+  --code-bg: #1e1e1e;
+
+  // Utility
+  --text-on-accent: #1a1a1a;
+  --text-on-overlay: #ffffff;
+  --accent-info: #6ba3d6;
+
+  // RGB components
+  --accent-primary-rgb: 224, 224, 224;
+  --accent-hover-rgb: 245, 245, 245;
+  --text-primary-rgb: 224, 224, 224;
+  --text-muted-rgb: 102, 102, 102;
+  --success-rgb: 102, 187, 106;
+  --error-rgb: 239, 83, 80;
+  --warning-rgb: 255, 183, 77;
+  --accent-info-rgb: 107, 163, 214;
+}
+
+// ─── SCSS Variables (delegate to CSS custom properties) ────────
 
 // Backgrounds
-$bg-primary: #fafafa;
-$bg-secondary: #f0f0f0;
-$bg-sidebar: #f5f5f5;
-$bg-card: #ffffff;
-$bg-card-hover: #fafafa;
-$bg-input: #ffffff;
+$bg-primary: var(--bg-primary);
+$bg-secondary: var(--bg-secondary);
+$bg-sidebar: var(--bg-sidebar);
+$bg-card: var(--bg-card);
+$bg-card-hover: var(--bg-card-hover);
+$bg-input: var(--bg-input);
 
 // Borders
-$border-color: #e0e0e0;
-$border-light: #ebebeb;
+$border-color: var(--border-color);
+$border-light: var(--border-light);
 
 // Accent
-$accent-primary: #333333;
-$accent-hover: #1a1a1a;
-$accent-muted: #888888;
+$accent-primary: var(--accent-primary);
+$accent-hover: var(--accent-hover);
+$accent-muted: var(--accent-muted);
 
 // Text
-$text-primary: #1a1a1a;
-$text-secondary: #666666;
-$text-muted: #999999;
+$text-primary: var(--text-primary);
+$text-secondary: var(--text-secondary);
+$text-muted: var(--text-muted);
 
 // Status
-$success: #2e7d32;
-$error: #c62828;
-$warning: #f57f17;
+$success: var(--success);
+$error: var(--error);
+$warning: var(--warning);
 $info: $accent-primary;
 
 // Message bubbles
-$msg-user-bg: #e8e8e8;
-$msg-assistant-bg: #f5f5f5;
-$msg-system-border: #bdbdbd;
+$msg-user-bg: var(--msg-user-bg);
+$msg-assistant-bg: var(--msg-assistant-bg);
+$msg-system-border: var(--msg-system-border);
 
 // Code
-$code-bg: #f4f4f4;
+$code-bg: var(--code-bg);
 
 // Typography
 $font-ui: 'Inter', system-ui, -apple-system, sans-serif;

packages/client/src/views/LoginView.vue

@@ -159,7 +159,7 @@ async function handleLogin() {
   border: none;
   border-radius: $radius-sm;
   background: $text-primary;
-  color: #fff;
+  color: var(--text-on-accent);
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;

packages/client/src/views/hermes/LogsView.vue

@@ -215,7 +215,7 @@ onMounted(async () => {
   border-left: 2px solid transparent;
 
   &:hover {
-    background-color: rgba($accent-primary, 0.03);
+    background-color: rgba(var(--accent-primary-rgb), 0.03);
   }
 
   &.level-error {
@@ -225,7 +225,7 @@ onMounted(async () => {
 
   &.level-warning {
     border-left-color: $warning;
-    .log-message { color: #d9720f; }
+    .log-message { color: $warning; }
   }
 }
 
@@ -244,10 +244,10 @@ onMounted(async () => {
   min-width: 42px;
   text-align: center;
 
-  &.level-error { background: rgba($error, 0.12); color: $error; }
-  &.level-warning { background: rgba($warning, 0.12); color: #d9720f; }
-  &.level-debug { background: rgba($accent-primary, 0.06); color: $text-muted; }
-  &.level-info { background: rgba($accent-primary, 0.06); color: $text-muted; }
+  &.level-error { background: rgba(var(--error-rgb), 0.12); color: $error; }
+  &.level-warning { background: rgba(var(--warning-rgb), 0.12); color: $warning; }
+  &.level-debug { background: rgba(var(--accent-primary-rgb), 0.06); color: $text-muted; }
+  &.level-info { background: rgba(var(--accent-primary-rgb), 0.06); color: $text-muted; }
 }
 
 .log-logger {

packages/client/src/views/hermes/SkillsView.vue

@@ -163,7 +163,7 @@ function handleSelect(category: string, skill: string) {
   border-radius: $radius-sm;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
   }
 }
 

packages/client/src/views/hermes/TerminalView.vue

@@ -562,7 +562,7 @@ onUnmounted(() => {
   margin-bottom: 2px;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
     color: $text-primary;
 
     .session-item-delete {
@@ -571,7 +571,7 @@ onUnmounted(() => {
   }
 
   &.active {
-    background: rgba($accent-primary, 0.1);
+    background: rgba(var(--accent-primary-rgb), 0.1);
     color: $text-primary;
     font-weight: 500;
   }
@@ -604,7 +604,7 @@ onUnmounted(() => {
 .session-item-shell {
   font-size: 10px;
   color: $accent-primary;
-  background: rgba($accent-primary, 0.08);
+  background: rgba(var(--accent-primary-rgb), 0.08);
   padding: 0 5px;
   border-radius: 3px;
   line-height: 16px;
@@ -634,7 +634,7 @@ onUnmounted(() => {
 
   &:hover {
     color: $error;
-    background: rgba($error, 0.1);
+    background: rgba(var(--error-rgb), 0.1);
   }
 }
 
@@ -648,7 +648,7 @@ onUnmounted(() => {
   border-radius: $radius-sm;
 
   &:hover {
-    background: rgba($accent-primary, 0.06);
+    background: rgba(var(--accent-primary-rgb), 0.06);
   }
 }