✨ 主题色配置指南 | 福禄票务文档中心

¶ ✨ 主题色配置指南

¶ 核心配色变量表

变量名	默认值	描述
`--color-base-background`	`#090d1a`	背景主色
`--color-sub-background`	`#090d1a`	次级背景色色
`--color-tab-check-text`	`#333`	电影分类tab文案命中颜色
`--color-base-background`	`#090d1a`	默认背景色
`--color-base-text`	`#fbd4b5`	基础主题色
`--color-card-background`	`#2f3543`	卡片背景色
`--color-card-title`	`#fff`	卡片标题色
`--color-card-sub-text`	`#888888`	卡片辅助文案配色
`--color-button-text`	`#333`	按钮文案配色
`--button-gradient`	`linear-gradient(325deg, #f9dea2 15%, #fff8ec 75%);`	主操作按钮配色

....

注：所有变量定义在 common/assets/css/theme/base.less

¶ 🎨 配色方案示例：蓝白主题

// 文件路径: common/assets/css/theme/base.less
  
/* NutUI 框架配色覆盖 */
--nutui-overlay-content-bg-color: #ffffff;
--nutui-popup-border-radius: 0;
  
/* 主色调配置 */
--color-base-text: #3364c3;
  
/* 背景色配置 */
--color-base-background: #f4f4f4;
--color-sub-background: #ffffff;
--color-card-background: linear-gradient(325deg, #f1faff  0%, #f8f8f8  99%);
  
/* 按钮配色 */
--button-gradient: linear-gradient(325deg, #365fc0  0%, #01c1fa  99%);
--button-baground-main: #3364c3;
--button-baground-pre: #E8E8E8;
  
/* 边框与文字 */
--color-border-box: 1rpx solid #000000;
--color-primary: #000000;
--color-base-text: #fff;
  
  
// TabBar图标配色 (需自行实现)
// 使用方式：@import './theme/base.less';
// 然后在组件中使用 var(--color-base-text)

¶ 🎨 主题预览 - 蓝白配色方案

首页效果	电影详情页

影院选择页	选座购票页