feat(ui): 全项目暗黑模式适配 — 加 theme 变量 + 替换全部硬编码颜色
新增主题变量 (light + dark 两套): - --success-rgb / --danger / --danger-rgb (utils/theme.js) 全部硬编码 #XXX / rgba 颜色统一改主题变量: - progress-ring 加 trackColor prop,默认 #EEEEEE (canvas 不能直接读 CSS var,需要 caller 传字面颜色) - ui-modal sheet 背景 #FFFFFF → var(--card-bg), 加底部 padding 避开 Dock TabBar - ui-modal handle #DDD → var(--bg-soft) - ui-btn --danger 文字 #E53935 → var(--danger), 边框 rgba(229,57,53,...) → rgba(var(--danger-rgb),...) - calendar-heatmap 三个 #999/#333 文字色 → var(--text-secondary)/var(--text) - index picker: preset/custom input 背景 #F5F5F5 → var(--bg-soft), label #666 → var(--text-secondary) - index done-badge 绿色 → var(--success-rgb), pending-text #CCC → var(--text-secondary) - records empty/hint #CCC/#E0E0E0 → var(--text-secondary), danger 红 → var(--danger) - settings plan-editor-sheet 背景 #FFFFFF → var(--card-bg), avatar 背景, handle, editor-input, preview 全部跟进 - leaderboard 金/铜背景 #FFF7E6/#FFF1E6 → rgba 半透明 (dark mode 下不刺眼) Tab bar inactive 图标重新根据 dark mode 切换颜色 (#999999 light / #98989F dark) leaderboard.json 删除 backgroundColor: #F5F5F5 覆盖,让 theme.json 接管 故意保留: - 各 .wxss 中渐变按钮上的 #FFFFFF 文字色 - 排行榜金/铜文字色 #FA8C16/#D46B08 (视觉符号约定) - 各页 data 中 orange theme 默认值 (onShow 后被 themeMod 覆盖)
This commit is contained in:
+23
-18
@@ -5,21 +5,23 @@ const themeMod = require('../utils/theme')
|
||||
const _initialTheme = themeMod.getCurrentTheme()
|
||||
const _initialThemeStyle = themeMod.getThemeStyle(_initialTheme)
|
||||
|
||||
// SVG icons as data URIs. We use two variants per icon:
|
||||
// - *Fill*: solid filled (active state, theme color baked in at module load)
|
||||
// - *Line*: outlined (inactive state, neutral gray)
|
||||
// Themes are 5 fixed colors so we can bake the active color in at module init.
|
||||
// If the user changes theme, the component re-renders via pageLifetimes.show.
|
||||
// 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'
|
||||
|
||||
// Solid (active) color from current theme
|
||||
const _activeColor = _initialTheme.primary
|
||||
// Inactive color
|
||||
const _inactiveColor = '#999999'
|
||||
const _getInactiveColor = () => {
|
||||
const darkMod = require('../utils/darkMode')
|
||||
return darkMod.getInitialDarkMode() ? DARK_INACTIVE : LIGHT_INACTIVE
|
||||
}
|
||||
|
||||
const _initialInactiveColor = _getInactiveColor()
|
||||
|
||||
const _svg = (path, fill) =>
|
||||
'data:image/svg+xml,' + encodeURIComponent(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="' + fill + '">' +
|
||||
path + '</svg>'
|
||||
path + '</svg>'
|
||||
)
|
||||
|
||||
// 24x24 Material-style paths
|
||||
@@ -30,18 +32,18 @@ const PATH_CALENDAR_LINE = '<path d="M19 4h-2V2h-2v2H9V2H7v2H5C3.9 4 3 4.9 3 6v1
|
||||
const PATH_RANK = '<path d="M7.5 21H2V9h5.5v12zm7.25-14h-5.5v14h5.5V7zM22 11h-5.5v10H22V11z"/>'
|
||||
const PATH_RANK_LINE = '<path d="M7.5 21H2V9h5.5v12zm7.25-14h-5.5v14h5.5V7zM22 11h-5.5v10H22V11z" fill-rule="evenodd"/>'
|
||||
const PATH_SETTINGS = '<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>'
|
||||
const PATH_SETTINGS_LINE = '<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" fill-rule="evenodd"/>'
|
||||
const PATH_SETTINGS_LINE = '<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00-.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" fill-rule="evenodd"/>'
|
||||
|
||||
const _buildIcons = (activeHex) => {
|
||||
const _buildIcons = (activeHex, inactiveHex) => {
|
||||
const a = activeHex
|
||||
return {
|
||||
home: _svg(PATH_HOME_LINE, _inactiveColor),
|
||||
home: _svg(PATH_HOME_LINE, inactiveHex),
|
||||
homeFill: _svg(PATH_HOME, a),
|
||||
calendar: _svg(PATH_CALENDAR_LINE, _inactiveColor),
|
||||
calendar: _svg(PATH_CALENDAR_LINE, inactiveHex),
|
||||
calendarFill: _svg(PATH_CALENDAR, a),
|
||||
rank: _svg(PATH_RANK_LINE, _inactiveColor),
|
||||
rank: _svg(PATH_RANK_LINE, inactiveHex),
|
||||
rankFill: _svg(PATH_RANK, a),
|
||||
settings: _svg(PATH_SETTINGS_LINE, _inactiveColor),
|
||||
settings: _svg(PATH_SETTINGS_LINE, inactiveHex),
|
||||
settingsFill: _svg(PATH_SETTINGS, a)
|
||||
}
|
||||
}
|
||||
@@ -51,12 +53,15 @@ Component({
|
||||
selected: 0,
|
||||
theme: _initialTheme,
|
||||
themeStyle: _initialThemeStyle,
|
||||
svgIcons: _buildIcons(_initialTheme.primary)
|
||||
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()) })
|
||||
}
|
||||
},
|
||||
|
||||
@@ -64,7 +69,7 @@ Component({
|
||||
show() {
|
||||
themeMod.applyThemeToPage(this)
|
||||
const theme = themeMod.getCurrentTheme()
|
||||
this.setData({ svgIcons: _buildIcons(theme.primary) })
|
||||
this.setData({ svgIcons: _buildIcons(theme.primary, _getInactiveColor()) })
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user