Change favicons, styling, dark mode.

app/components/chat.module.scss

@@ -11,7 +11,7 @@
   cursor: default;
   width: 64px;
   height: 64px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
+  border: var(--border-in-light);
   border-radius: 5px;
   margin-right: 10px;
   background-size: cover;
@@ -414,14 +414,14 @@
 
 .chat-message-status {
   font-size: 12px;
-  color: #aaa;
+  color: var(--color-black-200);
   line-height: 1.5;
   margin-top: 5px;
 }
 
 .chat-message-tools {
   font-size: 12px;
-  color: #aaa;
+  color: var(--color-black-200);
   line-height: 1.5;
   margin-top: 5px;
   .chat-message-tool {
@@ -493,7 +493,7 @@
 .chat-message-item-image-multi {
   box-sizing: border-box;
   border-radius: 10px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
+  border: var(--border-in-light);
 }
 
 @media only screen and (max-width: 600px) {

app/components/exporter.module.scss

@@ -206,7 +206,7 @@
         }
 
         @media screen and (max-width: 600px) {
-          $image-width: calc(calc(100vw/2)/var(--image-count));
+          $image-width: calc(calc(100vw / 2) / var(--image-count));
 
           .message-image-multi {
             width: $image-width;
@@ -214,13 +214,13 @@
           }
 
           .message-image {
-            max-width: calc(100vw/3*2);
+            max-width: calc(100vw / 3 * 2);
           }
         }
 
         @media screen and (min-width: 600px) {
-          $max-image-width: calc(900px/3*2/var(--image-count));
-          $image-width: calc(80vw/3*2/var(--image-count));
+          $max-image-width: calc(900px / 3 * 2 / var(--image-count));
+          $image-width: calc(80vw / 3 * 2 / var(--image-count));
 
           .message-image-multi {
             width: $image-width;
@@ -230,7 +230,7 @@
           }
 
           .message-image {
-            max-width: calc(100vw/3*2);
+            max-width: calc(100vw / 3 * 2);
           }
         }
 
@@ -242,7 +242,7 @@
         .message-image-multi {
           box-sizing: border-box;
           border-radius: 10px;
-          border: rgba($color: #888, $alpha: 0.2) 1px solid;
+          border: var(--border-in-light);
         }
       }
 
@@ -267,5 +267,6 @@
     }
   }
 
-  .default-theme {}
-}
+  .default-theme {
+  }
+}

app/components/home.module.scss

@@ -82,7 +82,7 @@
   right: 0;
   height: 100%;
   width: $width;
-  background-color: rgba($color: #000000, $alpha: 0);
+  background-color: transparent;
   cursor: ew-resize;
   transition: all ease 0.3s;
   display: flex;
@@ -226,7 +226,7 @@
 .chat-item-info {
   display: flex;
   justify-content: space-between;
-  color: rgb(166, 166, 166);
+  color: var(--color-black-200);
   font-size: 12px;
   margin-top: 8px;
   animation: slide-in ease 0.3s;

app/components/mcp-market.module.scss

@@ -112,20 +112,22 @@
         padding: 2px 8px;
         border-radius: 4px;
         font-size: 12px;
-        background-color: #16a34a;
-        color: #fff;
+        background-color: var(--color-teal-600); // Running
+        color: #fff; // Keep white text for contrast
         animation: pulse 1.5s infinite;
 
         &[data-status="stopping"] {
-          background-color: #9ca3af;
+          background-color: var(--color-black-200); // Stopping
+          animation: none; // Stop pulsing when stopping
         }
 
         &[data-status="starting"] {
-          background-color: #4ade80;
+          background-color: var(--color-teal-400); // Starting
         }
 
         &[data-status="error"] {
-          background-color: #f87171;
+          background-color: var(--color-red-500); // Error
+          animation: none; // Stop pulsing on error
         }
       }
 
@@ -156,19 +158,21 @@
             padding: 2px 8px;
             border-radius: 4px;
             font-size: 12px;
-            background-color: #22c55e;
-            color: #fff;
+            background-color: var(--color-teal-600); // Running/Success
+            color: #fff; // Keep white text
 
             &.error {
-              background-color: #ef4444;
+              background-color: var(--color-red-500); // Error
+              animation: none;
             }
 
             &.stopped {
-              background-color: #6b7280;
+              background-color: var(--color-black-200); // Stopped
+              animation: none;
             }
 
             &.initializing {
-              background-color: #f59e0b;
+              background-color: var(--color-orange-500); // Initializing
               animation: pulse 1.5s infinite;
             }
 

app/components/new-chat.module.scss

@@ -74,9 +74,9 @@
 
     $linear: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0),
+      transparent,
       rgba(0, 0, 0, 1),
-      rgba(0, 0, 0, 0)
+      transparent
     );
 
     -webkit-mask-image: $linear;

app/components/tts.module.scss

@@ -83,7 +83,7 @@
           }
           .plugin-runtime-warning {
             font-size: 12px;
-            color: #f86c6c;
+            color: var(--color-red-500);
           }
         }
       }

app/components/voice-print/voice-print.tsx

@@ -1,5 +1,18 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import styles from "./voice-print.module.scss";
+import { useAppConfig } from "@/app/store"; // Import config store
+
+// Helper function to convert hex color to RGB object
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
 
 interface VoicePrintProps {
   frequencies?: Uint8Array;
@@ -15,6 +28,12 @@ export function VoicePrint({ frequencies, isActive }: VoicePrintProps) {
   const historyLengthRef = useRef(10);
   // 存储动画帧ID，用于清理
   const animationFrameRef = useRef<number>();
+  const config = useAppConfig(); // Get theme config
+  const [primaryColorRgb, setPrimaryColorRgb] = useState<{
+    r: number;
+    g: number;
+    b: number;
+  } | null>(null);
 
   /**
    * 更新频率历史数据
@@ -34,6 +53,12 @@ export function VoicePrint({ frequencies, isActive }: VoicePrintProps) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
+    // Get primary color from CSS variable
+    const computedStyle = getComputedStyle(canvas);
+    const primaryColorHex = computedStyle.getPropertyValue("--primary").trim();
+    const rgb = hexToRgb(primaryColorHex);
+    setPrimaryColorRgb(rgb); // Store RGB for drawing
+
     /**
      * 处理高DPI屏幕显示
      * 根据设备像素比例调整canvas实际渲染分辨率
@@ -147,13 +172,29 @@ export function VoicePrint({ frequencies, isActive }: VoicePrintProps) {
 
       /**
        * 渐变效果：
-       * 从左到右应用三色渐变，带透明度
-       * 使用蓝色系配色提升视觉效果
+       * Use primary theme color for gradient
        */
       const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-      gradient.addColorStop(0, "rgba(100, 180, 255, 0.95)");
-      gradient.addColorStop(0.5, "rgba(140, 200, 255, 0.9)");
-      gradient.addColorStop(1, "rgba(180, 220, 255, 0.95)");
+      if (primaryColorRgb) {
+        // Use variations of the primary color for the gradient
+        const { r, g, b } = primaryColorRgb;
+        // Adjust brightness slightly for stops (example: make middle stop slightly lighter)
+        const rMid = Math.min(255, r + 20);
+        const gMid = Math.min(255, g + 20);
+        const bMid = Math.min(255, b + 20);
+        const rEnd = Math.min(255, r + 40);
+        const gEnd = Math.min(255, g + 40);
+        const bEnd = Math.min(255, b + 40);
+
+        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.95)`);
+        gradient.addColorStop(0.5, `rgba(${rMid}, ${gMid}, ${bMid}, 0.9)`);
+        gradient.addColorStop(1, `rgba(${rEnd}, ${gEnd}, ${bEnd}, 0.95)`);
+      } else {
+        // Fallback to original blue if color parsing fails
+        gradient.addColorStop(0, "rgba(100, 180, 255, 0.95)");
+        gradient.addColorStop(0.5, "rgba(140, 200, 255, 0.9)");
+        gradient.addColorStop(1, "rgba(180, 220, 255, 0.95)");
+      }
 
       ctx.fillStyle = gradient;
       ctx.fill();
@@ -170,7 +211,8 @@ export function VoicePrint({ frequencies, isActive }: VoicePrintProps) {
         cancelAnimationFrame(animationFrameRef.current);
       }
     };
-  }, [frequencies, isActive, updateHistory]);
+    // Add config.theme to dependencies to re-run effect on theme change
+  }, [frequencies, isActive, updateHistory, config.theme, primaryColorRgb]);
 
   return (
     <div className={styles["voice-print"]}>