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 {
|
page {
|
||||||
--text: #E5E5E7;
|
--text: #E5E5E7;
|
||||||
--text-secondary: #98989F;
|
--text-secondary: #98989F;
|
||||||
--bg: #0F0F12;
|
--bg: #2C2C2E;
|
||||||
--bg-gradient-start: #0F0F12;
|
--bg-gradient-start: #2C2C2E;
|
||||||
--bg-gradient-end: #14141A;
|
--bg-gradient-end: #38383A;
|
||||||
--card-bg: #1C1C1E;
|
--card-bg: #3A3A3C;
|
||||||
--bg-soft: #2C2C2E;
|
--bg-soft: #48484A;
|
||||||
--border: #2C2C2E;
|
--border: #48484A;
|
||||||
--success: #30D158;
|
--success: #30D158;
|
||||||
--success-rgb: 48,209,88;
|
--success-rgb: 48,209,88;
|
||||||
--danger: #FF6B6B;
|
--danger: #FF6B6B;
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
*/
|
*/
|
||||||
module.exports = {
|
module.exports = {
|
||||||
/** 应用版本号,外显在设置页「关于」 */
|
/** 应用版本号,外显在设置页「关于」 */
|
||||||
version: 'v2.6',
|
version: 'v2.7',
|
||||||
|
|
||||||
/** 最后更新日期,外显在设置页「关于」 */
|
/** 最后更新日期,外显在设置页「关于」 */
|
||||||
updatedAt: '2026-07-09',
|
updatedAt: '2026-07-09',
|
||||||
|
|||||||
@@ -62,6 +62,20 @@ Component({
|
|||||||
// Rebuild icons in case the user changed theme/dark mode since module load
|
// Rebuild icons in case the user changed theme/dark mode since module load
|
||||||
const theme = themeMod.getCurrentTheme()
|
const theme = themeMod.getCurrentTheme()
|
||||||
this.setData({ svgIcons: _buildIcons(theme.primary, _getInactiveColor()) })
|
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
|
if (index === this.data.selected) return
|
||||||
wx.switchTab({ url: pages[index] })
|
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 {
|
.dock-icon {
|
||||||
width: 44rpx;
|
width: 50rpx;
|
||||||
height: 44rpx;
|
height: 50rpx;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
margin-bottom: 4rpx;
|
margin-bottom: 5rpx;
|
||||||
opacity: 0.5;
|
opacity: 0.7;
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-text {
|
.dock-text {
|
||||||
font-size: 20rpx;
|
font-size: 23rpx;
|
||||||
color: var(--text-secondary, #999);
|
color: var(--text-secondary, #999);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
|
|||||||
@@ -144,6 +144,11 @@ Page({
|
|||||||
// Tab page without method: re-apply via themeMod
|
// Tab page without method: re-apply via themeMod
|
||||||
try { themeMod.applyThemeToPage(p) } catch (e) {}
|
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)
|
themeMod.applyThemeToPage(this)
|
||||||
},
|
},
|
||||||
|
|||||||
+1
-1
@@ -97,7 +97,7 @@ 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;--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;'
|
: '--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};`
|
return `${baseVars}--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user