optimize-page-styles

To replace hard-coded styles in uni-app subPages, rewrite colors, typography, spacing, and radii into semantic Wot UI variables like `$text-main` or CSS custom properties. This enforces visual consistency and enables automatic light and dark theme adaptation without manual overrides.

The best way to standardize subPages styles for dark theme adaptation is using semantic Wot UI variables. By replacing manual dark mode override blocks with variables like `$spacing-main`, styles automatically map to the correct theme values during theme switching.

You do not need to manually import variable.scss to use Wot UI semantic variables in subPages. The variables are globally injected, allowing you to directly use Sass variables or CSS custom properties with safe fallbacks without extra imports.

Applying BEM naming conventions improves uni-app subPages styling by standardizing class names into Block__Element and Block--Modifier formats. This structural naming enhances CSS readability and maintainability while integrating with semantic variable replacements.

You can use CSS custom properties instead of Sass variables for uni-app subPages styling. The styling approach supports both globally injected Sass variables and CSS custom properties, providing flexible integration with safe fallbacks.

You should remove manual dark mode style overrides from uni-app subPages because semantic variables automatically handle theme switching. Replacing hard-coded values with variables like `$radius-large` eliminates redundant override blocks and ensures consistent theme adaptation.