From 25a3595ede05a957d01917bfc84890520ba8f965 Mon Sep 17 00:00:00 2001
From: rzzf <cszhjh@gmail.com>
Date: Wed, 4 Mar 2026 10:51:28 +0800
Subject: [PATCH] docs(components): [watermark] improve text color readability
 in dark (#23721)

---
 docs/examples/watermark/custom.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/examples/watermark/custom.vue b/docs/examples/watermark/custom.vue
index 0a0051c6b5..0e4ff4114a 100644
--- a/docs/examples/watermark/custom.vue
+++ b/docs/examples/watermark/custom.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, watch } from 'vue'
+import { isDark } from '~/composables/dark'
 
 const config = reactive({
   content: 'Element Plus',
@@ -12,6 +13,16 @@ const config = reactive({
   gap: [100, 100] as [number, number],
   offset: [] as unknown as [number, number],
 })
+
+watch(
+  isDark,
+  (value) => {
+    config.font.color = value
+      ? 'rgba(255, 255, 255, .15)'
+      : 'rgba(0, 0, 0, .15)'
+  },
+  { immediate: true }
+)
 </script>
 
 <template>