Theme 主题系统

re 组件库 CSS 变量主题系统，负责注入默认设计令牌并支持暗色和局部变量覆盖

re 组件库 CSS 变量主题系统，负责注入默认设计令牌并支持暗色和局部变量覆盖。

演示

9:41

代码示例

<!-- 默认主题 -->
  <re-theme class="demo-default demo-preview-shell"> <view class="demo-preview-card"> <text class="demo-preview-card__title">默认设计令牌</text> <text class="demo-preview-card__desc">容器、文本、边框和主色都来自 re-theme 默认变量。</text> </view> </re-theme>

<!-- 暗色主题 -->
  <re-theme class="demo-dark demo-preview-shell" theme="dark"> <view class="demo-preview-card demo-preview-card--dark"> <text class="demo-preview-card__title demo-preview-card__title--dark">暗色容器</text> <text class="demo-preview-card__desc demo-preview-card__desc--dark">适合夜间场景，文本与容器变量同步切换。</text> </view> </re-theme>

<!-- 自定义变量覆盖 -->
  <re-theme class="demo-custom-style demo-preview-shell" :themeVars="customThemeVars" customStyle="padding: 12px; border-radius: 12px;"> <view class="demo-preview-card demo-preview-card--custom"> <text class="demo-preview-card__title">品牌色覆盖</text> <text class="demo-preview-card__desc">通过 themeVars 覆盖主色、背景和圆角，不影响全局默认值。</text> </view> </re-theme>

<!-- 多个实例 -->
  <re-theme class="demo-multi-1 demo-mini-theme" customStyle="padding: 10px; border-radius: 8px; margin-bottom: 8px;"> <text class="demo-mini-theme__text">实例一：默认主题块。</text> </re-theme>
  <re-theme class="demo-multi-2 demo-mini-theme" theme="dark" customStyle="padding: 10px; border-radius: 8px;"> <text class="demo-mini-theme__text demo-mini-theme__text--dark">实例二：暗色主题块。</text> </re-theme>

引入

推荐使用 easycom 模式直接在模板中使用 <re-theme />。

如需手动引入：

import ReTheme from '@/uni_modules/reglow-review/components/re-theme/re-theme'

如需读取主题工具函数：

import { DARK_CLASS, darkTheme, defaultTheme, normalizeThemeVars, themeVarsToStyleString } from '@/uni_modules/reglow-review/utssdk/re-theme/interface.uts'

使用说明

  • re-theme 会把默认设计令牌注入当前容器作用域；
  • 设置 theme="dark" 可切换为暗色变量集合；
  • 通过 themeVars 可以覆盖局部品牌色、圆角、背景和层级等令牌；
  • 如果需要同时处理主题、国际化和 z-index，优先使用 re-config-provider。

示例片段

默认主题容器

<template>
  <re-theme>
    <view class="card">默认主题内容</view>
  </re-theme>
</template>

暗色模式

<template>
  <re-theme theme="dark">
    <view class="card">暗色主题内容</view>
  </re-theme>
</template>

覆盖品牌色和圆角

<template>
  <re-theme :themeVars="themeVars">
    <view class="card">局部主题覆盖</view>
  </re-theme>
</template>

<script setup lang="uts">
const themeVars: UTSJSONObject = {
  'color-primary': '#0f766e',
  'radius-large': '16px',
  'bg-color-container': '#ecfeff'
}
</script>

API

Theme Props

名称类型默认值描述必传
themestring"light"主题模式，可选 light / darkN
themeVarsUTSJSONObject{}自定义主题变量，会覆盖当前作用域令牌N
customStylestring""自定义样式N
customClassstring""自定义类名N

Theme Slots

名称描述
default默认插槽，子节点共享当前主题变量

主要导出

名称类型说明
defaultThemeUTSJSONObject默认亮色设计令牌
darkThemeUTSJSONObject暗色覆盖令牌
DARK_CLASSstring暗色主题类名
normalizeThemeVarsfunction规范化主题变量 key
themeVarsToStyleStringfunction将主题变量对象转为 style 字符串
ConfigProvider 全局配置
统一管理局部主题、国际化文案和弹层层级，是整个组件体系的配置入口。
Button 按钮
按钮组件，支持多种主题、尺寸、形状和变体，参考TDesign设计风格