From 613f8c2b5707675be69ab583bb27f51aadcd2f66 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 17 Oct 2025 10:10:54 +0800
Subject: [PATCH] fix: Watermark differentiation for light and dark themes
 (#10669)

---
 frontend/src/layout/index.vue                  |  2 +-
 frontend/src/store/interface/index.ts          |  3 ++-
 .../views/setting/panel/watermark/index.vue    | 18 ++++++++++++------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 3b5850c1a..807dbcdec 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -28,7 +28,7 @@
             :content="loadContent()"
             :font="{
                 fontSize: globalStore.watermark.fontSize,
-                color: globalStore.watermark.color,
+                color: globalStore.isDarkTheme ? globalStore.watermark.darkColor : globalStore.watermark.lightColor,
                 textBaseline: 'top',
             }"
             :rotate="globalStore.watermark.rotate"
diff --git a/frontend/src/store/interface/index.ts b/frontend/src/store/interface/index.ts
index 7487586de..ebbb26490 100644
--- a/frontend/src/store/interface/index.ts
+++ b/frontend/src/store/interface/index.ts
@@ -18,7 +18,8 @@ export interface ThemeConfigProp {
 }
 
 export interface Watermark {
-    color: string;
+    lightColor: string;
+    darkColor: string;
     fontSize: number;
     content: string;
     rotate: number;
diff --git a/frontend/src/views/setting/panel/watermark/index.vue b/frontend/src/views/setting/panel/watermark/index.vue
index 7d520e6d0..3c5bf6679 100644
--- a/frontend/src/views/setting/panel/watermark/index.vue
+++ b/frontend/src/views/setting/panel/watermark/index.vue
@@ -5,7 +5,7 @@
             :content="loadContent()"
             :font="{
                 fontSize: form.fontSize,
-                color: form.color,
+                color: globalStore.isDarkTheme ? form.darkColor : form.lightColor,
                 textBaseline: 'top',
             }"
             :rotate="form.rotate"
@@ -23,8 +23,11 @@
                     <el-input clearable v-model.trim="form.content" />
                     <span class="input-help">{{ $t('setting.contentHelper') }}</span>
                 </el-form-item>
-                <el-form-item :label="$t('setting.watermarkColor')" prop="color">
-                    <el-color-picker v-model="form.color" show-alpha />
+                <el-form-item :label="$t('setting.light')" prop="lightColor">
+                    <el-color-picker v-model="form.lightColor" show-alpha />
+                </el-form-item>
+                <el-form-item :label="$t('setting.dark')" prop="darkColor">
+                    <el-color-picker v-model="form.darkColor" show-alpha />
                 </el-form-item>
                 <el-form-item :label="$t('setting.watermarkFont')" prop="fontSize">
                     <el-slider v-model="form.fontSize" :min="12" :max="100" />
@@ -62,7 +65,8 @@ const drawerVisible = ref();
 const loading = ref();
 
 let form = reactive({
-    color: globalStore.isDarkTheme ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)',
+    lightColor: 'rgba(0, 0, 0, 0.15)',
+    darkColor: 'rgba(255, 255, 255, 0.15)',
     fontSize: 16,
     content: '${nodeName} - ${nodeAddr}',
     rotate: -22,
@@ -92,7 +96,8 @@ const loadContent = () => {
 };
 
 const setDefault = () => {
-    form.color = globalStore.isDarkTheme ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
+    form.lightColor = 'rgba(0, 0, 0, 0.15)';
+    form.darkColor = 'rgba(255, 255, 255, 0.15)';
     form.fontSize = 16;
     form.content = '${nodeName} - ${nodeAddr}';
     form.rotate = -22;
@@ -115,7 +120,8 @@ const onSave = async (formEl: FormInstance | undefined) => {
                     loading.value = false;
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                     globalStore.watermark = {
-                        color: form.color,
+                        lightColor: form.lightColor,
+                        darkColor: form.darkColor,
                         fontSize: form.fontSize,
                         content: form.content,
                         rotate: form.rotate,