fix: tab bar icons invisible due to CSS variable isolation

Root cause: WeChat miniprogram components have style isolation by default.
Changing tab bar hardcoded #888/#666 to var(--text-secondary) broke
because --text-secondary was only defined on page{} in app.wxss and
couldn't cascade into the custom-tab-bar component.

Fix:
1. theme.js: inject BASE_VARS (--text, --text-secondary, --border, etc.)
   into themeStyle string so they're available via inline style everywhere
2. Add styleIsolation: apply-shared to all 3 component JSONs so page-level
   CSS variables cascade into components
This commit is contained in:
2026-06-04 16:39:17 +08:00
parent 89d93c8155
commit 5d155e41fe
4 changed files with 6 additions and 2 deletions
@@ -1,4 +1,5 @@
{ {
"component": true, "component": true,
"styleIsolation": "apply-shared",
"usingComponents": {} "usingComponents": {}
} }
@@ -1,4 +1,5 @@
{ {
"component": true, "component": true,
"styleIsolation": "apply-shared",
"usingComponents": {} "usingComponents": {}
} }
+1
View File
@@ -1,4 +1,5 @@
{ {
"component": true, "component": true,
"styleIsolation": "apply-shared",
"usingComponents": {} "usingComponents": {}
} }
+3 -2
View File
@@ -41,6 +41,7 @@ const THEMES = [
} }
] ]
const BASE_VARS = '--text:#333;--text-secondary:#999;--bg:#F5F5F5;--card-bg:#FFFFFF;--border:#EEE;--success:#4CAF50;'
const DEFAULT_THEME_ID = 'orange' const DEFAULT_THEME_ID = 'orange'
const THEME_KEY = 'app_theme' const THEME_KEY = 'app_theme'
let _lastNavColor = '' let _lastNavColor = ''
@@ -80,14 +81,14 @@ const applyThemeToPage = (self) => {
const theme = getCurrentTheme() const theme = getCurrentTheme()
self.setData({ self.setData({
theme, theme,
themeStyle: `--primary:${theme.primary};--primary-light:${theme.primaryLight};--primary-bg:${theme.primaryBg};--primary-rgb:${theme.primaryRgb};` themeStyle: `${BASE_VARS}--primary:${theme.primary};--primary-light:${theme.primaryLight};--primary-bg:${theme.primaryBg};--primary-rgb:${theme.primaryRgb};`
}) })
_setNavBarColor(theme.primary) _setNavBarColor(theme.primary)
} }
const getThemeStyle = (theme) => { const getThemeStyle = (theme) => {
const t = theme || getCurrentTheme() const t = theme || getCurrentTheme()
return `--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};` return `${BASE_VARS}--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
} }
module.exports = { module.exports = {