fix: 深色模式下页面底色不正确

根因: 渐变背景放在 page 元素,渐变变量定义在 page 选择器,
用户手动选深色时 themeStyle 只更新容器 <view> 上的变量,
page 上的渐变变量不变(CSS 变量只能向下继承)。

修复: 渐变移到 .container::before (position: fixed 覆盖视口),
themeStyle 加 --bg-gradient-start/--bg-gradient-end 变量。
This commit is contained in:
2026-07-08 11:49:21 +08:00
parent 5f79367ffa
commit 4268735053
2 changed files with 20 additions and 4 deletions
+18 -2
View File
@@ -12,13 +12,14 @@ page {
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
font-size: 28rpx;
color: var(--text);
background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%) !important;
background-color: var(--bg);
transition: background-color 0.3s ease, color 0.3s ease;
}
/* dark mode overrides */
/* dark mode overrides (only for system dark mode; user choice goes through themeStyle) */
@media (prefers-color-scheme: dark) {
page {
--bg: #0F0F12;
--bg-gradient-start: #0F0F12;
--bg-gradient-end: #14141A;
}
@@ -29,6 +30,21 @@ page {
padding-bottom: calc(134rpx + env(safe-area-inset-bottom));
min-height: 100vh;
box-sizing: border-box;
position: relative;
}
/* Viewport-spanning gradient background. Uses vars from inline themeStyle,
* so it follows user-selected mode (not just system mode). */
.container::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
z-index: -1;
pointer-events: none;
}
/* Defensive sizing for all SVG icons rendered as <image>.