From 5d155e41fe27d94279382d7a98055ad9b4b3c1be Mon Sep 17 00:00:00 2001
From: cnliucheng <brokenway@163.com>
Date: Thu, 4 Jun 2026 16:39:17 +0800
Subject: [PATCH] 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
---
 components/calendar-heatmap/calendar-heatmap.json | 1 +
 components/progress-ring/progress-ring.json       | 1 +
 custom-tab-bar/index.json                         | 1 +
 utils/theme.js                                    | 5 +++--
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/calendar-heatmap/calendar-heatmap.json b/components/calendar-heatmap/calendar-heatmap.json
index a89ef4d..4f0a3f0 100644
--- a/components/calendar-heatmap/calendar-heatmap.json
+++ b/components/calendar-heatmap/calendar-heatmap.json
@@ -1,4 +1,5 @@
 {
   "component": true,
+  "styleIsolation": "apply-shared",
   "usingComponents": {}
 }
diff --git a/components/progress-ring/progress-ring.json b/components/progress-ring/progress-ring.json
index a89ef4d..4f0a3f0 100644
--- a/components/progress-ring/progress-ring.json
+++ b/components/progress-ring/progress-ring.json
@@ -1,4 +1,5 @@
 {
   "component": true,
+  "styleIsolation": "apply-shared",
   "usingComponents": {}
 }
diff --git a/custom-tab-bar/index.json b/custom-tab-bar/index.json
index a89ef4d..4f0a3f0 100644
--- a/custom-tab-bar/index.json
+++ b/custom-tab-bar/index.json
@@ -1,4 +1,5 @@
 {
   "component": true,
+  "styleIsolation": "apply-shared",
   "usingComponents": {}
 }
diff --git a/utils/theme.js b/utils/theme.js
index 485bc13..84d8a2a 100644
--- a/utils/theme.js
+++ b/utils/theme.js
@@ -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 THEME_KEY = 'app_theme'
 let _lastNavColor = ''
@@ -80,14 +81,14 @@ const applyThemeToPage = (self) => {
   const theme = getCurrentTheme()
   self.setData({
     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)
 }
 
 const getThemeStyle = (theme) => {
   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 = {