From e70712a6542350747f0039328214baf1bc538b09 Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Wed, 12 Aug 2026 15:58:04 +0800
Subject: [PATCH] fix(component): make scrim strokes theme-aware and
 deterministic

---
 src/components/SongScrim.vue | 22 +++++++---------------
 src/styles/base.css          |  8 --------
 src/styles/tokens/dark.css   |  9 ++++++---
 src/styles/tokens/light.css  |  3 +++
 4 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/components/SongScrim.vue b/src/components/SongScrim.vue
index 28f6b36..bb07ff1 100644
--- a/src/components/SongScrim.vue
+++ b/src/components/SongScrim.vue
@@ -5,7 +5,7 @@
  */
 defineProps({
   pattern: { type: String, default: 'ice' },
-  opacity: { type: Number, default: 0.3 },
+  opacity: { type: Number, default: 1 },
   box: { type: Boolean, default: false }
 })
 defineOptions({ name: 'SongScrim' })
@@ -81,34 +81,26 @@ const PATTERNS = {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  opacity: 0.9;
 }
 .song-scrim--box {
   position: absolute !important;
   border-radius: var(--song-radius-l);
 }
-.song-scrim--box :deep(svg) {
-  filter: opacity(0.5);
-}
 .song-scrim__tile {
   width: 100%;
   height: 100%;
-  mix-blend-mode: multiply;
-  /* 降低与底色对比度：浅色模式下提亮纹样（乘变浅），暗色模式下压暗（屏变弱） */
-  filter: brightness(1.6);
 }
 .song-scrim__tile :deep(svg) {
   width: 100%;
   height: 100%;
 }
-:global([data-theme='dark']) .song-scrim__tile {
-  mix-blend-mode: screen;
-  filter: brightness(0.62);
+/* 纹样线条颜色由 --song-scrim-line 按主题决定（低对比、确定性渲染，不用 blend/filter 技巧） */
+.song-scrim__tile :deep(path),
+.song-scrim__tile :deep(line),
+.song-scrim__tile :deep(circle) {
+  stroke: var(--song-scrim-line, rgba(90, 107, 116, 0.16));
 }
 .song-scrim--box :deep(svg) {
-  filter: opacity(0.5) brightness(1.4);
-}
-:global([data-theme='dark']) .song-scrim--box :deep(svg) {
-  filter: opacity(0.5) brightness(0.72);
+  opacity: 0.5;
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/base.css b/src/styles/base.css
index b8e6d3d..35aa102 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -46,14 +46,6 @@ a:hover {
   border-radius: 2px;
 }
 
-/* 纹样底纹基底（SVG 通过 mask 合成，置于内容之下） */
-.song-scrim {
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-}
-
 /* 数字等宽 */
 .tnum {
   font-variant-numeric: tabular-nums;
diff --git a/src/styles/tokens/dark.css b/src/styles/tokens/dark.css
index 2bbf11b..e726376 100644
--- a/src/styles/tokens/dark.css
+++ b/src/styles/tokens/dark.css
@@ -3,11 +3,11 @@
   color-scheme: dark;
 
   --song-bg: #14181b;
-  --song-bg-elevated: #1d2326;
-  --song-surface-3: #232b2f;
+  --song-bg-elevated: #20272b;
+  --song-surface-3: #273036;
 
   --song-text: #e6ecef;
-  --song-text-secondary: #a9b6be;
+  --song-text-secondary: #b9c6cd;
   --song-text-disabled: #5e6a71;
 
   --song-primary: #9dbeee;
@@ -31,6 +31,9 @@
   /* 章印（印泥砂红，暗色下微提亮） */
   --song-seal: #c76a4f;
 
+  /* 底纹线条（暗色下为淡月白，勿用深色线否则整页显暗） */
+  --song-scrim-line: rgba(230, 236, 239, 0.1);
+
   --song-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
   --song-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
   --song-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45);
diff --git a/src/styles/tokens/light.css b/src/styles/tokens/light.css
index b7273d7..50ac18f 100644
--- a/src/styles/tokens/light.css
+++ b/src/styles/tokens/light.css
@@ -36,6 +36,9 @@
   /* 章印（印泥砂红） */
   --song-seal: #a84635;
 
+  /* 底纹线条（与底色低对比） */
+  --song-scrim-line: rgba(90, 107, 116, 0.14);
+
   /* 阴影 §6 */
   --song-shadow-1: 0 1px 2px rgba(20, 24, 27, 0.06);
   --song-shadow-2: 0 2px 8px rgba(20, 24, 27, 0.08);