fix: CSS custom properties not resolving from inline style

lc/wx_pbzc

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

This commit is contained in:

cnliucheng

2026-06-04 17:03:09 +08:00

parent 8079242daf

commit fb3bc6c045

7 changed files with 7 additions and 10 deletions

									
										pages/timer/timer.js
									
		+1
		-1
	
												View File
												
				@@ -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',