主题定制指南

Shadow UI 提供了灵活的主题定制机制，支持 CSS 变量和 SCSS 变量双重主题定制，可以根据项目需求轻松定制组件的外观和风格。

使用 SCSS 变量定制

在您的 uni.scss 文件中覆盖以下变量，可以全局定制 Shadow UI 组件的样式：

// 影子UI基础参数配置 开始
// 文字尺寸 
$ui-font-size: 28rpx;

// 颜色 
$primary: #1E9FFF;      // 主色
$success: #009688;      // 成功色
$fail: #FFC107;         // 失败色
$warning: #FF5722;      // 警告色
$danger: #F44336;       // 危险色
$info: #8799A3;         // 信息色

$borderColor: #E0E0E0;  // 边框颜色
$bgColor: #F5F5F5;      // 背景颜色

$focusBorderColor: #40a9ff;     // 获取焦点的边框颜色
$focusBoxShadow: #40a9ff33;     // 获取焦点的边框阴影

$focusErrBorderColor: #ff4d4f;  // 获取焦点的错误边框颜色
$focusErrBoxShadow: #ff4d4f33;  // 获取焦点的错误边框阴影
// 影子UI基础参数配置 结束

// 上下居中 比较常用所以放到了全局
@mixin ui-flex-center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

使用 CSS 变量定制

在您的全局样式文件中覆盖以下 CSS 变量，可以动态定制 Shadow UI 组件的样式：

:root {
    /* 主色调 */
    --ui-primary-color: #1E9FFF;
    --ui-primary-light-color: #4DB3FF;
    --ui-primary-dark-color: #007ACC;
    
    /* 成功色 */
    --ui-success-color: #009688;
    
    /* 警告色 */
    --ui-warning-color: #FFC107;
    
    /* 危险色 */
    --ui-danger-color: #F44336;
    
    /* 文本颜色 */
    --ui-text-color: #333333;
    --ui-text-light-color: #666666;
    --ui-text-lighter-color: #999999;
    
    /* 边框颜色 */
    --ui-border-color: #E0E0E0;
    --ui-border-light-color: #F0F0F0;
    
    /* 背景颜色 */
    --ui-bg-color: #FFFFFF;
    --ui-bg-light-color: #F5F5F5;
}

自定义主题示例

示例：创建深色主题

您可以通过覆盖 CSS 变量来创建深色主题：

/* 深色主题 */
.dark-theme {
    --ui-primary-color: #4DB3FF;
    --ui-primary-light-color: #73C0FF;
    --ui-primary-dark-color: #007ACC;
    
    --ui-success-color: #00C853;
    --ui-warning-color: #FFD600;
    --ui-danger-color: #FF5252;
    
    --ui-text-color: #E0E0E0;
    --ui-text-light-color: #BDBDBD;
    --ui-text-lighter-color: #9E9E9E;
    
    --ui-border-color: #424242;
    --ui-border-light-color: #303030;
    
    --ui-bg-color: #212121;
    --ui-bg-light-color: #303030;
}

然后在需要使用深色主题的页面或组件中添加 dark-theme 类：

<template>
  <div class="dark-theme">
    <ui-button type="primary">主要按钮</ui-button>
    <ui-card title="卡片标题">
      <p>这是一个深色主题的卡片</p>
    </ui-card>
  </div>
</template>

示例：自定义按钮样式

您可以通过覆盖特定组件的 CSS 变量来自定义单个组件的样式：

<template>
  <div class="custom-button-demo">
    <ui-button type="primary" class="custom-button">自定义按钮</ui-button>
  </div>
</template>

<style>
.custom-button-demo {
  --ui-button-primary-bg-color: #673AB7;
  --ui-button-primary-border-color: #512DA8;
  --ui-button-primary-text-color: #FFFFFF;
  --ui-button-primary-hover-bg-color: #7E57C2;
  --ui-button-primary-active-bg-color: #512DA8;
}
</style>

主题变量说明

颜色变量

变量名	描述	默认值
--ui-primary-color	主色调	#1E9FFF
--ui-success-color	成功色	#009688
--ui-warning-color	警告色	#FFC107
--ui-danger-color	危险色	#F44336
--ui-info-color	信息色	#8799A3

文本颜色变量

变量名	描述	默认值
--ui-text-color	主要文本颜色	#333333
--ui-text-light-color	次要文本颜色	#666666
--ui-text-lighter-color	辅助文本颜色	#999999

边框颜色变量

变量名	描述	默认值
--ui-border-color	主要边框颜色	#E0E0E0
--ui-border-light-color	次要边框颜色	#F0F0F0

背景颜色变量

变量名	描述	默认值
--ui-bg-color	主要背景颜色	#FFFFFF
--ui-bg-light-color	次要背景颜色	#F5F5F5

组件特定变量

除了全局变量外，每个组件还提供了特定的 CSS 变量，用于更精细地控制组件的样式。例如：

按钮组件变量

变量名	描述
--ui-button-primary-bg-color	主要按钮背景色
--ui-button-primary-border-color	主要按钮边框色
--ui-button-primary-text-color	主要按钮文本色
--ui-button-primary-hover-bg-color	主要按钮悬停背景色
--ui-button-primary-active-bg-color	主要按钮激活背景色

卡片组件变量

变量名	描述
--ui-card-bg-color	卡片背景色
--ui-card-border-color	卡片边框色
--ui-card-title-color	卡片标题色

更多组件特定变量，请参考各个组件的文档。

主题切换

您可以通过 JavaScript 动态切换主题，例如：

// 切换到深色主题
function switchToDarkTheme() {
  document.documentElement.classList.add('dark-theme');
  // 或者直接修改 CSS 变量
  // document.documentElement.style.setProperty('--ui-bg-color', '#212121');
}

// 切换到浅色主题
function switchToLightTheme() {
  document.documentElement.classList.remove('dark-theme');
  // 或者直接修改 CSS 变量
  // document.documentElement.style.setProperty('--ui-bg-color', '#FFFFFF');
}

注意事项

1. 当同时使用 SCSS 变量和 CSS 变量时，CSS 变量的优先级更高
2. 自定义主题时，建议使用 CSS 变量，以便支持动态主题切换
3. 对于需要兼容旧浏览器的项目，可以使用 SCSS 变量进行静态主题定制
4. 主题定制不会影响组件的功能，只会改变组件的外观