From e4c96c9868cee867de0a7d0ec939789b5ada6f2e Mon Sep 17 00:00:00 2001
From: Dream Hunter <dreamhunter2333@gmail.com>
Date: Mon, 19 Jan 2026 20:20:06 +0800
Subject: [PATCH] style: use softer blue for AI extraction info in dark mode
 (#817)

- Use Gmail's #A8C7FA color for AI extraction alert and tag in dark mode
- Update CHANGELOG.md and CHANGELOG_EN.md for v1.2.1

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 CHANGELOG.md                              |  4 +++
 CHANGELOG_EN.md                           | 12 ++++++++-
 frontend/src/components/AiExtractInfo.vue | 30 +++++++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98f125c4..46cfabfc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@
 
 - fix: |定时任务| 修复定时任务清理报错 `e.get is not a function`，使用可选链安全访问 Context 方法
 
+### Improvements
+
+- style: |AI 提取| 暗色模式下 AI 提取信息使用更柔和的蓝色 (#A8C7FA)，减少视觉疲劳
+
 ## v1.2.0
 
 ### Breaking Changes
diff --git a/CHANGELOG_EN.md b/CHANGELOG_EN.md
index 3f7fbde5..5db79727 100644
--- a/CHANGELOG_EN.md
+++ b/CHANGELOG_EN.md
@@ -6,7 +6,17 @@
   <a href="CHANGELOG_EN.md">🇺🇸 English</a>
 </p>
 
-## v1.2.0(main)
+## v1.2.1(main)
+
+### Bug Fixes
+
+- fix: |Scheduled Tasks| Fix scheduled task cleanup error `e.get is not a function`, use optional chaining for safe access to Context methods
+
+### Improvements
+
+- style: |AI Extraction| Use softer blue color (#A8C7FA) for AI extraction info in dark mode to reduce eye strain
+
+## v1.2.0
 
 ### Breaking Changes
 
diff --git a/frontend/src/components/AiExtractInfo.vue b/frontend/src/components/AiExtractInfo.vue
index a5d77696..bb72eab9 100644
--- a/frontend/src/components/AiExtractInfo.vue
+++ b/frontend/src/components/AiExtractInfo.vue
@@ -3,8 +3,34 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ContentCopyOutlined, LinkRound, CodeRound } from '@vicons/material';
 import { useMessage } from 'naive-ui';
+import { useGlobalState } from '../store';
 
 const message = useMessage();
+const { isDark } = useGlobalState();
+
+// Dark mode: use Gmail's softer blue (#A8C7FA) for better readability
+const alertThemeOverrides = computed(() => {
+  if (isDark.value) {
+    return {
+      colorSuccess: 'rgba(168, 199, 250, 0.15)',
+      borderSuccess: '1px solid rgba(168, 199, 250, 0.3)',
+      iconColorSuccess: '#A8C7FA',
+      titleTextColorSuccess: '#A8C7FA',
+    }
+  }
+  return {}
+});
+
+const tagThemeOverrides = computed(() => {
+  if (isDark.value) {
+    return {
+      colorSuccess: 'rgba(168, 199, 250, 0.15)',
+      borderSuccess: '1px solid rgba(168, 199, 250, 0.3)',
+      textColorSuccess: '#A8C7FA',
+    }
+  }
+  return {}
+});
 
 const { t } = useI18n({
   messages: {
@@ -108,7 +134,7 @@ const openLink = () => {
 
 <template>
   <div v-if="aiExtract && aiExtract.result" class="ai-extract-info">
-    <n-alert v-if="!compact" type="success" closable>
+    <n-alert v-if="!compact" type="success" closable :theme-overrides="alertThemeOverrides">
       <template #icon>
         <n-icon :component="typeIcon" />
       </template>
@@ -132,7 +158,7 @@ const openLink = () => {
         </n-button>
       </n-space>
     </n-alert>
-    <n-tag v-else type="success" @click="copyToClipboard" style="cursor: pointer;" size="small">
+    <n-tag v-else type="success" @click="copyToClipboard" style="cursor: pointer;" size="small" :theme-overrides="tagThemeOverrides">
       <template #icon>
         <n-icon :component="typeIcon" />
       </template>