fix(dark): 调亮暗黑色调 + dock 跟随暗黑切换 + 图标文字放大

- theme/app.wxss: 暗黑背景 #0F0F12->#2C2C2E,卡片 #1C1C1E->#3A3A3C,
  bg-soft/border 同步提亮,拉开卡片与背景对比(原太黑看不到卡片)
- custom-tab-bar: dock 注册 wx.onThemeChange,系统切暗黑/明亮实时跟随
  (组件不在 getCurrentPages,app.js watchDarkMode 通知不到)
- custom-tab-bar: 新增 updateTheme,settings 手动切深色时通知 dock
- custom-tab-bar.wxss: dock 图标 44->50rpx,文字 20->23rpx,未激活
  opacity 0.5->0.7(更醒目)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-09 15:02:17 +08:00
parent afd2b72bcb
commit d5121d349f
6 changed files with 38 additions and 13 deletions
+6 -6
View File
@@ -24,12 +24,12 @@ page {
page {
--text: #E5E5E7;
--text-secondary: #98989F;
--bg: #0F0F12;
--bg-gradient-start: #0F0F12;
--bg-gradient-end: #14141A;
--card-bg: #1C1C1E;
--bg-soft: #2C2C2E;
--border: #2C2C2E;
--bg: #2C2C2E;
--bg-gradient-start: #2C2C2E;
--bg-gradient-end: #38383A;
--card-bg: #3A3A3C;
--bg-soft: #48484A;
--border: #48484A;
--success: #30D158;
--success-rgb: 48,209,88;
--danger: #FF6B6B;
+1 -1
View File
@@ -4,7 +4,7 @@
*/
module.exports = {
/** 应用版本号,外显在设置页「关于」 */
version: 'v2.6',
version: 'v2.7',
/** 最后更新日期,外显在设置页「关于」 */
updatedAt: '2026-07-09',
+20
View File
@@ -62,6 +62,20 @@ Component({
// Rebuild icons in case the user changed theme/dark mode since module load
const theme = themeMod.getCurrentTheme()
this.setData({ svgIcons: _buildIcons(theme.primary, _getInactiveColor()) })
// The custom tabBar isn't in getCurrentPages(), so app.js's
// watchDarkMode (which notifies pages) never reaches it. Listen for
// system theme changes ourselves so the dock flips dark/light live,
// not just on the next tab switch.
if (!this._themeChangeBound && typeof wx.onThemeChange === 'function') {
this._onThemeChange = () => {
themeMod.applyThemeToPage(this)
this.setData({ svgIcons: _buildIcons(themeMod.getCurrentTheme().primary, _getInactiveColor()) })
}
try {
wx.onThemeChange(this._onThemeChange)
this._themeChangeBound = true
} catch (e) {}
}
}
},
@@ -84,6 +98,12 @@ Component({
]
if (index === this.data.selected) return
wx.switchTab({ url: pages[index] })
},
// Called by settings.onSelectDarkMode - the dock isn't in
// getCurrentPages() so the page-loop there misses it.
updateTheme() {
themeMod.applyThemeToPage(this)
this.setData({ svgIcons: _buildIcons(themeMod.getCurrentTheme().primary, _getInactiveColor()) })
}
}
})
+5 -5
View File
@@ -36,18 +36,18 @@
}
.dock-icon {
width: 44rpx;
height: 44rpx;
width: 50rpx;
height: 50rpx;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 4rpx;
opacity: 0.5;
margin-bottom: 5rpx;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.dock-text {
font-size: 20rpx;
font-size: 23rpx;
color: var(--text-secondary, #999);
line-height: 1;
transition: color 0.2s ease;
+5
View File
@@ -144,6 +144,11 @@ Page({
// Tab page without method: re-apply via themeMod
try { themeMod.applyThemeToPage(p) } catch (e) {}
}
// 自定义 tabBar 不在 pages 里,单独通知它切换暗黑/明亮
try {
const tb = p.getTabBar && p.getTabBar()
if (tb && typeof tb.updateTheme === 'function') tb.updateTheme()
} catch (e) {}
})
themeMod.applyThemeToPage(this)
},
+1 -1
View File
@@ -97,7 +97,7 @@ const setTheme = (id) => {
const getThemeStyle = (theme, isDark = false) => {
const t = theme || getCurrentTheme()
const baseVars = isDark
? '--text:#E5E5E7;--text-secondary:#98989F;--bg:#0F0F12;--bg-gradient-start:#0F0F12;--bg-gradient-end:#14141A;--card-bg:#1C1C1E;--bg-soft:#2C2C2E;--border:#2C2C2E;--success:#30D158;--success-rgb:48,209,88;--danger:#FF6B6B;--danger-rgb:255,107,107;'
? '--text:#E5E5E7;--text-secondary:#98989F;--bg:#2C2C2E;--bg-gradient-start:#2C2C2E;--bg-gradient-end:#38383A;--card-bg:#3A3A3C;--bg-soft:#48484A;--border:#48484A;--success:#30D158;--success-rgb:48,209,88;--danger:#FF6B6B;--danger-rgb:255,107,107;'
: '--text:#333333;--text-secondary:#999999;--bg:#F5F5F5;--bg-gradient-start:#F5F5F5;--bg-gradient-end:#FAFAFA;--card-bg:#FFFFFF;--bg-soft:#F0F0F0;--border:#EEEEEE;--success:#4CAF50;--success-rgb:76,175,80;--danger:#E53935;--danger-rgb:229,57,53;'
return `${baseVars}--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
}