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>

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

@@ -91,7 +91,11 @@ watch(currentToolCalls, scrollToBottom)
   display: flex;
   flex-direction: column;
   gap: 16px;
-  background-color: #ffffff;
+  background-color: $bg-card;
+
+  .dark & {
+    background-color: #333333;
+  }
 }
 
 .empty-state {