From 49b96eeaebdeec4acbfc82c7f658f627c16b03e0 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Tue, 24 Feb 2026 22:07:45 -0400
Subject: [PATCH] make light softer

---
 src/App.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 39db799..66dcf8f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -251,9 +251,9 @@ const translate = async () => {
 </script>
 
 <template>
-  <div class="h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
+  <div class="h-screen bg-[#f9fafb] dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
     <!-- Header -->
-    <header class="h-14 border-b dark:border-slate-800 bg-white dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
+    <header class="h-14 border-b dark:border-slate-800 bg-[#f9fafb] dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
       <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
         <Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
         <h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
@@ -261,7 +261,7 @@ const translate = async () => {
       <div class="flex items-center gap-2">
         <button 
           @click="toggleTheme"
-          class="p-2 rounded-full transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
+          class="p-2 rounded-full transition-colors hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
           :title="settings.isDark ? '切换亮色主题' : '切换暗色主题'"
         >
           <Sun v-if="settings.isDark" class="w-5 h-5" />
@@ -269,14 +269,14 @@ const translate = async () => {
         </button>
         <button 
           @click="view = 'settings'"
-          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
           title="设置"
         >
           <Settings class="w-5 h-5" />
         </button>
         <button 
           @click="view = 'logs'"
-          :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
           title="日志"
         >
           <FileText class="w-5 h-5" />
@@ -286,10 +286,10 @@ const translate = async () => {
 
     <main class="flex-1 flex overflow-hidden min-h-0 relative">
       <!-- Translation View -->
-      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden h-full">
+      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/80 dark:bg-slate-900 overflow-hidden h-full">
         <!-- Source Pane -->
         <div class="flex-1 flex flex-col min-h-0 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/80 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Source Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -345,7 +345,7 @@ const translate = async () => {
                     ></textarea>
           
                     <!-- Context Input Area -->
-                    <div class="px-6 py-3 bg-slate-50/50 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
+                    <div class="px-6 py-3 bg-slate-100/30 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
                        <div class="flex items-center justify-between mb-1.5 h-5">
                           <div class="flex items-center gap-1.5">
                             <FileText class="w-4 h-4 text-slate-400" />
@@ -601,7 +601,7 @@ const translate = async () => {
                 </button>
               </div>
             </div>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
+            <div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
               <div class="space-y-2">
                 <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
                 <input 
@@ -652,7 +652,7 @@ const translate = async () => {
 
           <section>
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6">
+            <div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6">
               <div class="space-y-2">
                 <div class="flex items-center justify-between">
                   <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
@@ -685,7 +685,7 @@ const translate = async () => {
               清空
             </button>
           </div>
-          <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-4 space-y-4">
+          <div class="bg-slate-200/40 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
             <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
               暂无日志记录。请尝试进行翻译。
             </div>