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:
@@ -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,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
"component": true,
|
"component": true,
|
||||||
|
"styleIsolation": "apply-shared",
|
||||||
"usingComponents": {}
|
"usingComponents": {}
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-2
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user