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));
+          $max-image-width: calc(900px / 3 * 2 / var(--image-count));
-          $image-width: calc(80vw/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;
+        background-color: var(--color-teal-600); // Running
-        color: #fff;
+        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;
+            background-color: var(--color-teal-600); // Running/Success
-            color: #fff;
+            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)");
+      if (primaryColorRgb) {
-      gradient.addColorStop(0.5, "rgba(140, 200, 255, 0.9)");
+        // Use variations of the primary color for the gradient
-      gradient.addColorStop(1, "rgba(180, 220, 255, 0.95)");
+        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"]}>

app/icons/canyonSM.svg

@@ -1,3 +1,3 @@
 <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44ZM28.0124 24.9178L19.1483 16.054C19.0702 15.9759 18.9717 15.9298 18.8695 15.9145C18.8297 15.9041 18.7877 15.8978 18.7445 15.8978H16.2902C16.247 15.8978 16.2055 15.9041 16.1652 15.9145C16.063 15.9294 15.9645 15.9755 15.8864 16.054L7.0231 24.9178C6.97159 24.9693 6.9342 25.0299 6.90969 25.0943C6.86441 25.1695 6.83782 25.2568 6.83782 25.3506V27.8049C6.83782 28.0791 7.06215 28.3034 7.33632 28.3034H9.79061C9.88408 28.3034 9.97173 28.2768 10.0469 28.2316C10.1113 28.2075 10.172 28.1701 10.2235 28.1181L17.5178 20.8238L24.8121 28.1181C24.8636 28.1697 24.9242 28.207 24.9886 28.2316C25.0638 28.2768 25.1511 28.3034 25.2449 28.3034H27.6992C27.9734 28.3034 28.1977 28.0791 28.1977 27.8049V25.3506C28.1977 25.2572 28.1711 25.1695 28.1259 25.0943C28.1018 25.0299 28.0644 24.9693 28.0124 24.9178ZM36.8576 25.0944C36.8335 25.03 36.7961 24.9693 36.7441 24.9178L27.8804 16.0541C27.8023 15.976 27.7038 15.9299 27.6017 15.9145C27.5618 15.9041 27.5198 15.8979 27.4766 15.8979H25.0223C24.7482 15.8979 24.5238 16.1222 24.5238 16.3964V18.8507C24.5238 18.8939 24.5301 18.9354 24.5404 18.9757C24.5554 19.0779 24.6015 19.1764 24.68 19.2545L33.5442 28.1186C33.5957 28.1701 33.6564 28.2075 33.7207 28.232C33.7959 28.2773 33.8832 28.3039 33.9771 28.3039H36.4313C36.7055 28.3039 36.9298 28.0796 36.9298 27.8054V25.3511C36.9298 25.2576 36.9033 25.17 36.858 25.0948L36.8576 25.0944Z" fill="white"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44ZM28.0124 24.9178L19.1483 16.054C19.0702 15.9759 18.9717 15.9298 18.8695 15.9145C18.8297 15.9041 18.7877 15.8978 18.7445 15.8978H16.2902C16.247 15.8978 16.2055 15.9041 16.1652 15.9145C16.063 15.9294 15.9645 15.9755 15.8864 16.054L7.0231 24.9178C6.97159 24.9693 6.9342 25.0299 6.90969 25.0943C6.86441 25.1695 6.83782 25.2568 6.83782 25.3506V27.8049C6.83782 28.0791 7.06215 28.3034 7.33632 28.3034H9.79061C9.88408 28.3034 9.97173 28.2768 10.0469 28.2316C10.1113 28.2075 10.172 28.1701 10.2235 28.1181L17.5178 20.8238L24.8121 28.1181C24.8636 28.1697 24.9242 28.207 24.9886 28.2316C25.0638 28.2768 25.1511 28.3034 25.2449 28.3034H27.6992C27.9734 28.3034 28.1977 28.0791 28.1977 27.8049V25.3506C28.1977 25.2572 28.1711 25.1695 28.1259 25.0943C28.1018 25.0299 28.0644 24.9693 28.0124 24.9178ZM36.8576 25.0944C36.8335 25.03 36.7961 24.9693 36.7441 24.9178L27.8804 16.0541C27.8023 15.976 27.7038 15.9299 27.6017 15.9145C27.5618 15.9041 27.5198 15.8979 27.4766 15.8979H25.0223C24.7482 15.8979 24.5238 16.1222 24.5238 16.3964V18.8507C24.5238 18.8939 24.5301 18.9354 24.5404 18.9757C24.5554 19.0779 24.6015 19.1764 24.68 19.2545L33.5442 28.1186C33.5957 28.1701 33.6564 28.2075 33.7207 28.232C33.7959 28.2773 33.8832 28.3039 33.9771 28.3039H36.4313C36.7055 28.3039 36.9298 28.0796 36.9298 27.8054V25.3511C36.9298 25.2576 36.9033 25.17 36.858 25.0948L36.8576 25.0944Z" fill="#FF4444"/>
 </svg>

app/layout.tsx

@@ -9,10 +9,10 @@ import { GoogleTagManager, GoogleAnalytics } from "@next/third-parties/google";
 import { getServerSideConfig } from "./config/server";
 
 export const metadata: Metadata = {
-  title: "NextChat",
+  title: "Canyon",
-  description: "Your personal ChatGPT Chat Bot.",
+  description: "Talk to your infrastructure",
   appleWebApp: {
-    title: "NextChat",
+    title: "Canyon",
     statusBarStyle: "default",
   },
 };

app/styles/globals.scss

@@ -9,7 +9,7 @@
   --white: var(--color-fanta-50);
   --black: var(--color-black-900);
   --gray: var(--color-mud-500); /* Main background */
-  --primary: var(--color-violetta-500); /* Accent */
+  --primary: var(--color-red-400); /* Accent */
   --second: var(--color-mud-200); /* Secondary background */
   --hover-color: var(--color-black-100);
   --bar-color: var(--color-black-200); /* Scrollbar */