uni-halo/.agents/bak-skills/uniapp-uview/examples/advanced/custom-theme.md

Custom Theme

自定义主题

在 UniApp 项目中自定义 uView UI 主题。

修改主题变量

在 uni.scss 中修改主题变量：

/* uni.scss */
@import "uview-ui/theme.scss";

/* 自定义主题变量 */
$u-type-primary: #409EFF;
$u-type-success: #67C23A;
$u-type-warning: #E6A23C;
$u-type-error: #F56C6C;
$u-type-info: #909399;

/* 自定义其他变量 */
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #C0C4CC;
$u-border-color: #E4E7ED;
$u-bg-color: #F3F4F6;

使用 SCSS 变量

在组件中使用主题变量：

<template>
  <view class="custom-button">自定义按钮</view>
</template>

<style lang="scss" scoped>
.custom-button {
  background-color: $u-type-primary;
  color: #ffffff;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
}
</style>

全局样式覆盖

在 App.vue 中覆盖全局样式：

<style lang="scss">
@import "uview-ui/index.scss";

/* 覆盖 uView 默认样式 */
.u-button {
  border-radius: 8rpx;
}

.u-input {
  border-radius: 8rpx;
}
</style>

条件编译主题

不同平台可以使用不同主题：

/* uni.scss */
@import "uview-ui/theme.scss";

/* #ifdef H5 */
$u-type-primary: #409EFF;
/* #endif */

/* #ifdef MP-WEIXIN */
$u-type-primary: #07c160;
/* #endif */

/* #ifdef APP-PLUS */
$u-type-primary: #007AFF;
/* #endif */

注意事项

1. 变量名称：使用正确的变量名称
2. 引入顺序：先引入 uView 主题，再覆盖变量
3. 作用域：注意变量的作用域
4. 平台差异：使用条件编译处理平台差异
5. 测试验证：在不同平台测试主题效果