uni-halo/.agents/skills/uview-pro-vue3/examples/guide/theme.md

Theme Customization

官方文档: https://uviewpro.cn

Instructions

This example demonstrates how to customize uView Pro theme.

Key Concepts

• Custom class
• Custom style
• Global theme variables
• Style override

Example: Custom Class

<template>
  <u-button custom-class="my-button">Button</u-button>
</template>

<style lang="scss">
.my-button {
  background-color: #409eff;
  color: #fff;
}
</style>

Example: Custom Style

<template>
  <u-button :custom-style="{ backgroundColor: '#409eff', color: '#fff' }">
    Button
  </u-button>
</template>

Example: Global Theme Variables

// uni.scss or App.vue
$u-primary: #409eff;
$u-success: #67c23a;
$u-warning: #e6a23c;
$u-error: #f56c6c;
$u-info: #909399;

Example: Style Override with :deep()

<template>
  <u-button class="custom-button">Button</u-button>
</template>

<style lang="scss" scoped>
.custom-button {
  :deep(.u-button) {
    background-color: #409eff;
  }
}
</style>

Key Points

• Use custom-class for class-based styling
• Use custom-style for inline styling
• Override global theme variables
• Use :deep() for style penetration
• Support SCSS variables