From fb3bc6c04531222b4dcecb00dad9a918451e8cb1 Mon Sep 17 00:00:00 2001
From: cnliucheng <brokenway@163.com>
Date: Thu, 4 Jun 2026 17:03:09 +0800
Subject: [PATCH] fix: CSS custom properties not resolving from inline style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: WXSS compiler resolves var(--primary) at compile time
against page{} declarations in app.wxss. The orange defaults
(--primary:#FF6B35 etc.) were being baked into compiled WXSS,
so the inline style theme override on .container was ignored.
Records and settings pages always rendered orange regardless of
the user's theme choice.

Fix:
1. Remove --primary, --primary-light, --primary-bg, --primary-rgb
   from page{} in app.wxss, forcing WXSS to resolve var() at
   runtime from inline style on .container
2. Expand BASE_VARS in theme.js to include default orange theme
   vars, so the initial render (before onLoad) still has valid
   CSS custom properties — no flash of unstyled content
3. Export BASE_VARS from theme.js
4. Change all 4 pages + custom-tab-bar initial data.themeStyle
   from '' to themeMod.BASE_VARS, eliminating the empty-string
   gap between first render and onLoad
---
 app.wxss                   | 4 ----
 custom-tab-bar/index.js    | 2 +-
 pages/index/index.js       | 2 +-
 pages/records/records.js   | 2 +-
 pages/settings/settings.js | 2 +-
 pages/timer/timer.js       | 2 +-
 utils/theme.js             | 3 ++-
 7 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/app.wxss b/app.wxss
index 8fa064f..469d6be 100644
--- a/app.wxss
+++ b/app.wxss
@@ -1,8 +1,4 @@
 page {
-  --primary: #FF6B35;
-  --primary-light: #FF8C5A;
-  --primary-bg: #FFF3ED;
-  --primary-rgb: 255,107,53;
   --text: #333333;
   --text-secondary: #999999;
   --bg: #F5F5F5;
diff --git a/custom-tab-bar/index.js b/custom-tab-bar/index.js
index f306460..b04aba2 100644
--- a/custom-tab-bar/index.js
+++ b/custom-tab-bar/index.js
@@ -3,7 +3,7 @@ const themeMod = require('../utils/theme')
 Component({
   data: {
     selected: 0,
-    themeStyle: ''
+    themeStyle: themeMod.BASE_VARS
   },
 
   lifetimes: {
diff --git a/pages/index/index.js b/pages/index/index.js
index 2a01889..2f99235 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -6,7 +6,7 @@ const themeMod = require('../../utils/theme')
 Page({
   data: {
     theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
-    themeStyle: '',
+    themeStyle: themeMod.BASE_VARS,
     todayTarget: 0,
     todayDone: false,
     todayDuration: 0,
diff --git a/pages/records/records.js b/pages/records/records.js
index 51916ac..51d69fa 100644
--- a/pages/records/records.js
+++ b/pages/records/records.js
@@ -5,7 +5,7 @@ const themeMod = require('../../utils/theme')
 Page({
   data: {
     theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
-    themeStyle: '',
+    themeStyle: themeMod.BASE_VARS,
     totalDuration: 0,
     totalDurationText: '',
     totalSessions: 0,
diff --git a/pages/settings/settings.js b/pages/settings/settings.js
index c839580..e01adf5 100644
--- a/pages/settings/settings.js
+++ b/pages/settings/settings.js
@@ -4,7 +4,7 @@ const themeMod = require('../../utils/theme')
 Page({
   data: {
     theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
-    themeStyle: '',
+    themeStyle: themeMod.BASE_VARS,
     themes: themeMod.THEMES,
     currentThemeId: 'orange',
     plans: [
diff --git a/pages/timer/timer.js b/pages/timer/timer.js
index ea89fb7..89b1ab4 100644
--- a/pages/timer/timer.js
+++ b/pages/timer/timer.js
@@ -6,7 +6,7 @@ const themeMod = require('../../utils/theme')
 Page({
   data: {
     theme: { primary: '#FF6B35', primaryLight: '#FF8C5A', primaryBg: '#FFF3ED', primaryRgb: '255,107,53' },
-    themeStyle: '',
+    themeStyle: themeMod.BASE_VARS,
     duration: 60,
     remaining: 60,
     status: 'idle',
diff --git a/utils/theme.js b/utils/theme.js
index 0b2015a..8e4105c 100644
--- a/utils/theme.js
+++ b/utils/theme.js
@@ -41,7 +41,7 @@ const THEMES = [
   }
 ]
 
-const BASE_VARS = '--text:#333;--text-secondary:#999;--bg:#F5F5F5;--card-bg:#FFFFFF;--border:#EEE;--success:#4CAF50;'
+const BASE_VARS = '--text:#333;--text-secondary:#999;--bg:#F5F5F5;--card-bg:#FFFFFF;--border:#EEE;--success:#4CAF50;--primary:#FF6B35;--primary-light:#FF8C5A;--primary-bg:#FFF3ED;--primary-rgb:255,107,53;'
 const DEFAULT_THEME_ID = 'orange'
 const THEME_KEY = 'app_theme'
 let _lastNavColor = ''
@@ -111,6 +111,7 @@ const getThemeStyle = (theme) => {
 module.exports = {
   THEMES,
   DEFAULT_THEME_ID,
+  BASE_VARS,
   getThemeById,
   getCurrentTheme,
   setTheme,