fix: 深色模式下页面底色不正确
根因: 渐变背景放在 page 元素,渐变变量定义在 page 选择器, 用户手动选深色时 themeStyle 只更新容器 <view> 上的变量, page 上的渐变变量不变(CSS 变量只能向下继承)。 修复: 渐变移到 .container::before (position: fixed 覆盖视口), themeStyle 加 --bg-gradient-start/--bg-gradient-end 变量。
This commit is contained in:
@@ -12,13 +12,14 @@ page {
|
|||||||
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: var(--text);
|
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;
|
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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
page {
|
page {
|
||||||
|
--bg: #0F0F12;
|
||||||
--bg-gradient-start: #0F0F12;
|
--bg-gradient-start: #0F0F12;
|
||||||
--bg-gradient-end: #14141A;
|
--bg-gradient-end: #14141A;
|
||||||
}
|
}
|
||||||
@@ -29,6 +30,21 @@ page {
|
|||||||
padding-bottom: calc(134rpx + env(safe-area-inset-bottom));
|
padding-bottom: calc(134rpx + env(safe-area-inset-bottom));
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
box-sizing: border-box;
|
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>.
|
/* Defensive sizing for all SVG icons rendered as <image>.
|
||||||
|
|||||||
+2
-2
@@ -97,8 +97,8 @@ const setTheme = (id) => {
|
|||||||
const getThemeStyle = (theme, isDark = false) => {
|
const getThemeStyle = (theme, isDark = false) => {
|
||||||
const t = theme || getCurrentTheme()
|
const t = theme || getCurrentTheme()
|
||||||
const baseVars = isDark
|
const baseVars = isDark
|
||||||
? '--text:#E5E5E7;--text-secondary:#98989F;--bg:#0F0F12;--card-bg:#1C1C1E;--border:#2C2C2E;--success:#30D158;'
|
? '--text:#E5E5E7;--text-secondary:#98989F;--bg:#0F0F12;--bg-gradient-start:#0F0F12;--bg-gradient-end:#14141A;--card-bg:#1C1C1E;--border:#2C2C2E;--success:#30D158;'
|
||||||
: '--text:#333333;--text-secondary:#999999;--bg:#F5F5F5;--card-bg:#FFFFFF;--border:#EEEEEE;--success:#4CAF50;'
|
: '--text:#333333;--text-secondary:#999999;--bg:#F5F5F5;--bg-gradient-start:#F5F5F5;--bg-gradient-end:#FAFAFA;--card-bg:#FFFFFF;--border:#EEEEEE;--success:#4CAF50;'
|
||||||
return `${baseVars}--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
|
return `${baseVars}--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user