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

Custom Theme | 自定义主题

Instructions

This example demonstrates how to customize uView Pro theme in UniAppX projects.

Key Concepts

• Theme variable customization
• SCSS variable override
• Global theme configuration
• Component-specific styling

Example: Custom Theme Variables

/* uni.scss */
// Override uView Pro theme variables
$u-primary: #409EFF;
$u-success: #67C23A;
$u-warning: #E6A23C;
$u-error: #F56C6C;
$u-info: #909399;

// Import uView Pro theme
@import "uview-pro/theme.scss";

Example: Component-Specific Styling

<!-- pages/index/index.vue -->
<template>
  <view>
    <u-button type="primary" custom-style="background: #ff0000;">
      自定义按钮
    </u-button>
  </view>
</template>

<style lang="scss" scoped>
// Component-specific styles
:deep(.u-button) {
  border-radius: 20rpx;
}
</style>

Key Points

• Override theme variables in uni.scss
• Use custom-style prop for inline styles
• Use :deep() for component style override
• Test theme changes on all platforms
• Maintain consistency across components