diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index 7560d0305..b02111c36 100644 --- a/app/components/chat.module.scss +++ b/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) { diff --git a/app/components/exporter.module.scss b/app/components/exporter.module.scss index 5e992e7fd..457142d10 100644 --- a/app/components/exporter.module.scss +++ b/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 {} -} \ No newline at end of file + .default-theme { + } +} diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 381b6a9b9..d9ff86b2a 100644 --- a/app/components/home.module.scss +++ b/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; diff --git a/app/components/mcp-market.module.scss b/app/components/mcp-market.module.scss index 283436c7f..ae319ba79 100644 --- a/app/components/mcp-market.module.scss +++ b/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; } diff --git a/app/components/new-chat.module.scss b/app/components/new-chat.module.scss index b291a2366..d2d66f338 100644 --- a/app/components/new-chat.module.scss +++ b/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; diff --git a/app/components/tts.module.scss b/app/components/tts.module.scss index ba9f382e4..00e726afd 100644 --- a/app/components/tts.module.scss +++ b/app/components/tts.module.scss @@ -83,7 +83,7 @@ } .plugin-runtime-warning { font-size: 12px; - color: #f86c6c; + color: var(--color-red-500); } } } diff --git a/app/components/voice-print/voice-print.tsx b/app/components/voice-print/voice-print.tsx index 793210c19..185fbd691 100644 --- a/app/components/voice-print/voice-print.tsx +++ b/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(); + 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 (
diff --git a/app/icons/canyonSM.svg b/app/icons/canyonSM.svg index a40943c63..2f2cf13d6 100644 --- a/app/icons/canyonSM.svg +++ b/app/icons/canyonSM.svg @@ -1,3 +1,3 @@ - + diff --git a/app/layout.tsx b/app/layout.tsx index 47c058fb3..723f2d45c 100644 --- a/app/layout.tsx +++ b/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", - description: "Your personal ChatGPT Chat Bot.", + title: "Canyon", + description: "Talk to your infrastructure", appleWebApp: { - title: "NextChat", + title: "Canyon", statusBarStyle: "default", }, }; diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 021003124..1a5a44f89 100644 --- a/app/styles/globals.scss +++ b/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 */ diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png deleted file mode 100644 index 797a7d86a..000000000 Binary files a/public/android-chrome-192x192.png and /dev/null differ diff --git a/public/android-chrome-192x192.png.png b/public/android-chrome-192x192.png.png new file mode 100644 index 000000000..8e160a2f7 Binary files /dev/null and b/public/android-chrome-192x192.png.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png deleted file mode 100644 index c0265ef4f..000000000 Binary files a/public/android-chrome-512x512.png and /dev/null differ diff --git a/public/android-chrome-512x512.png.png b/public/android-chrome-512x512.png.png new file mode 100644 index 000000000..09c5fe8b7 Binary files /dev/null and b/public/android-chrome-512x512.png.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 6461c47c2..179aee64d 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index 3f8e0a535..2d3af1453 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index c464762ea..7d7516e4d 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index b5e8234cd..3f48a0a9f 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ