const themeMod = require('../utils/theme')
const darkMod = require('../utils/darkMode')
// Resolve the active theme synchronously at module load so the first paint
// already has the correct CSS variables — avoids a flash of the default theme.
const _initialTheme = themeMod.getCurrentTheme()
const _initialThemeStyle = themeMod.getThemeStyle(_initialTheme, darkMod.getInitialDarkMode())
// Inactive icon color follows the dark mode: matches --text-secondary in dark
// mode and a softer gray in light mode. Kept in sync with utils/theme.js so
// icons don't sit awkwardly on the dock background in either theme.
const LIGHT_INACTIVE = '#999999'
const DARK_INACTIVE = '#98989F'
const _getInactiveColor = () =>
darkMod.getInitialDarkMode() ? DARK_INACTIVE : LIGHT_INACTIVE
const _initialInactiveColor = _getInactiveColor()
const _svg = (path, fill) =>
'data:image/svg+xml,' + encodeURIComponent(
''
)
// 24x24 Material-style paths
const PATH_HOME = ''
const PATH_HOME_LINE = ''
const PATH_CALENDAR = ''
const PATH_CALENDAR_LINE = ''
const PATH_RANK = ''
const PATH_RANK_LINE = ''
const PATH_SETTINGS = ''
const PATH_SETTINGS_LINE = ''
const _buildIcons = (activeHex, inactiveHex) => {
const a = activeHex
return {
home: _svg(PATH_HOME_LINE, inactiveHex),
homeFill: _svg(PATH_HOME, a),
calendar: _svg(PATH_CALENDAR_LINE, inactiveHex),
calendarFill: _svg(PATH_CALENDAR, a),
rank: _svg(PATH_RANK_LINE, inactiveHex),
rankFill: _svg(PATH_RANK, a),
settings: _svg(PATH_SETTINGS_LINE, inactiveHex),
settingsFill: _svg(PATH_SETTINGS, a)
}
}
Component({
data: {
selected: 0,
theme: _initialTheme,
themeStyle: _initialThemeStyle,
svgIcons: _buildIcons(_initialTheme.primary, _initialInactiveColor)
},
lifetimes: {
attached() {
themeMod.applyThemeToPage(this)
// 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) {}
}
}
},
pageLifetimes: {
show() {
themeMod.applyThemeToPage(this)
const theme = themeMod.getCurrentTheme()
this.setData({ svgIcons: _buildIcons(theme.primary, _getInactiveColor()) })
}
},
methods: {
switchTab(e) {
const index = e.currentTarget.dataset.index
const pages = [
'/pages/index/index',
'/pages/records/records',
'/pages/leaderboard/leaderboard',
'/pages/settings/settings'
]
if (index === this.data.selected) return
// 切 tab 前设窗口背景色,避免真机过渡动画露出白色底色
try { themeMod.applyWindowBg() } catch (e) {}
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()) })
}
}
})