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:
@@ -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;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
module.exports = {
|
||||
/** 应用版本号,外显在设置页「关于」 */
|
||||
version: 'v2.6',
|
||||
version: 'v2.7',
|
||||
|
||||
/** 最后更新日期,外显在设置页「关于」 */
|
||||
updatedAt: '2026-07-09',
|
||||
|
||||
@@ -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()) })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
@@ -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};`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user