主题色配置业务包

涂鸦主题色配置业务包用于配置涂鸦 智能生活 App SDK 中 UI 相关的各种颜色，以及使用这些颜色开发自己的页面，从而使 UI 业务包提供的界面和您自己搭建的界面达到颜色效果的一致性。

接入组件

在工程的 Podfile 文件中添加主题色业务包组件，并执行 pod update 命令：

source 'https://github.com/tuya/tuya-pod-specs.git'
source 'https://cdn.cocoapods.org/'
platform :ios, '11.0'

target 'your_target_name' do
  # 添加主题色业务包
  pod 'ThingSmartThemeManagerBizBundle'
end

主题配置

主题色配置支持配置智能生活 App SDK 中 UI 相关的各种颜色，以及提供对应的颜色给开发者搭建直接的界面。

目前支持深浅两套主题色，并支持用户主动切换主题色或者跟随系统主题色。支持自定义的有主题色、背景色、警告背景颜色、成功背景颜色、引导背景颜色、导航栏背景色、Tab 选中颜色以及弹窗蒙层的透明度。可以使用以下两种方式中的任何一种进行配置：

方式一：通过配置文件进行配置

1. 确保项目根目录存在 thing_custom_config.json 文件，如果不存在，则需要添加。具体请参考 框架接入。

2. 添加颜色配置项。

   • colors：浅色模式配置
   • blackColors：深色模式配置

   {
       "config": {
           ...
       },
       "colors":{
           "themeColor": "#FF5A28",
           "backgroundColor": "#F8F8F8",
           "warningColor": "#FF4444",
           "tipsColor": "#00CC99",
           "guideColor": "#1989FA",
           "navigationBarColor": "#FFFFFF",
           "tabBarSelectedColor": "#FF5A28",
           "alertMaskAlpha": 0.4
       },
          "blackColors": {
           "themeColor": "#FF5A28",
           "backgroundColor": "#000000",
           "warningColor": "#FF4444",
           "tipsColor": "#2DDA86",
           "guideColor": "#1989FA",
           "navigationBarColor": "#1A1A1A",
           "tabBarSelectedColor": "#FF5A28",
           "alertMaskAlpha": 0.7
       }
   }
   

其中深浅主题色都支持：

• themeColor：主题色
• backgroundColor：背景色
• warningColor：警告颜色
• tipsColor：提示颜色
• guideColor：引导颜色
• navigationBarColor：导航栏背景色
• tabBarSelectedColor：Tab 栏选中颜色
• alertMaskAlpha：弹窗蒙层的透明度

方式二：通过 API 进行配置

//Light style
configNormalModuleWithThemeColor:backgroundColor:warningColor:tipsColor:guideColor:navigationBarColor:tabBarSelectedColor:alertMaskAlpha:

//Dark style
configDarkModuleWithThemeColor:backgroundColor:warningColor:tipsColor:guideColor:navigationBarColor:tabBarSelectedColor:alertMaskAlpha:

Objective-C 示例

#import <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingModuleServices.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    id<ThingThemeManagerProtocol> impl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingThemeManagerProtocol)];
    //Light style
    [impl configNormalModuleWithThemeColor:[UIColor thing_colorWithHexString:@"FF5A28"]
                           backgroundColor:[UIColor thing_colorWithHexString:@"F8F8F8"]
                                 warningColor:[UIColor thing_colorWithHexString:@"FF4444"]
                                    tipsColor:[UIColor thing_colorWithHexString:@"00CC99"]
                                   guideColor:[UIColor thing_colorWithHexString:@"1989FA"]
                           navigationBarColor:[UIColor thing_colorWithHexString:@"FFFFFF"]
                          tabBarSelectedColor:[UIColor thing_colorWithHexString:@"00FFFF"]
                               alertMaskAlpha:@(0.4)];
    //Dark style
    [impl configDarkModuleWithThemeColor:[UIColor thing_colorWithHexString:@"FF5A28"]
                           backgroundColor:[UIColor thing_colorWithHexString:@"000000"]
                                 warningColor:[UIColor thing_colorWithHexString:@"FF4444"]
                                    tipsColor:[UIColor thing_colorWithHexString:@"2DDA86"]
                                   guideColor:[UIColor thing_colorWithHexString:@"1989FA"]
                           navigationBarColor:[UIColor thing_colorWithHexString:@"1A1A1A"]
                          tabBarSelectedColor:[UIColor thing_colorWithHexString:@"FF5A28"]
                               alertMaskAlpha:@(0.7)];

    //do something else
    ...
}

Swift 示例

import ThingModuleServices
import ThingSmartBizCore
import ThingUIKit

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

     let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol
    //Light style
    impl?.configNormalModule(withThemeColor: UIColor.thing_color(withHexString: "FF5A28"),
                                 backgroundColor: UIColor.thing_color(withHexString: "F8F8F8"),
                                 warningColor: UIColor.thing_color(withHexString: "FF4444"),
                                 tipsColor: UIColor.thing_color(withHexString: "00CC99"),
                                 guideColor: UIColor.thing_color(withHexString: "1989FA"),
                                 navigationBarColor: UIColor.thing_color(withHexString: "FFFFFF"),
                                 tabBarSelectedColor: UIColor.thing_color(withHexString: "00FFFF"),
                                 alertMaskAlpha: 0.4)
    //Dark style
        if #available(iOS 13.0, *) {
            impl?.configDarkModule(withThemeColor: UIColor.thing_color(withHexString: "FF5A28"),
                                   backgroundColor: UIColor.thing_color(withHexString: "000000"),
                                   warningColor: UIColor.thing_color(withHexString: "FF4444"),
                                   tipsColor: UIColor.thing_color(withHexString: "2DDA86"),
                                   guideColor: UIColor.thing_color(withHexString: "1989FA"),
                                   navigationBarColor: UIColor.thing_color(withHexString: "1A1A1A"),
                                   tabBarSelectedColor: UIColor.thing_color(withHexString: "FF5A28"),
                                   alertMaskAlpha: 0.7)

        }

    //do something else
    ...

}

主题切换

主题样式切换

App 默认使用浅色主题，可以通过以下接口切换主题样式。

let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol

if #available(iOS 13.0, *) {
    impl?.changeThemeStyle(UIUserInterfaceStyle.dark)
}

参考系统定义，设置主题方案有以下枚举：

• unspecified：跟随系统，即和系统主题色保持一致
• light：使用浅色主题
• dark：使用深色主题

当前主题样式

let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol

if #available(iOS 13.0, *) {
    impl?.currentThemeStyle()
}

查询是否深色

当主题样式设置为跟随系统时，可以通过以下方法查询当前主题色是否是深色模式。

let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol

//当前主题色是否深色模式
impl?.isDarkMode();

监听主题模式变化

可以注册以下主题模式变化通知，来监听模式切换事件。

extern NSString * const cThingThemeChangedNotification;

另外，为 view 添加了主题变化扩展，当 layer 在主题切换时需要重绘场景时非常有用。

view.thingTheme_registerChangeAction({
     //Render your interface with themeColor
}, withKey: "myKey")

使用示例

当开发 UI 页面时，通过以下方法可以获取当前主题颜色。

Objective-C 示例

#import <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingModuleServices.h>

id<ThingThemeManagerProtocol> impl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingThemeManagerProtocol)];
UIColor *themeColor = impl.themeColor;

//render your interface with themeColor
...

Swift 示例

let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol
let themeColor = impl?.themeColor

//render your interface with themeColor
...

深浅色默认配置

根据颜色的色调、饱和度和亮度 HSB（Hue Saturation Brightness）值，可以判断属于深色还是浅色。

名词	说明
深色	表示 0 ≤ S ≤ 40% 并且 60% ≤ B ≤ 100% 的颜色
浅色	深色之外的其它颜色

/**
 * 主题色，通常作为按钮的背景色
 * 默认值为 #FF5A28
 * 支持自定义配置
 */
- (UIColor *)themeColor;

/**
 * 警告颜色，通常作为警告性控件的背景色，一般用来强烈地警告用户，吸引用户的注意
 * 默认值为 #FF4444
 * 支持自定义配置
 */
- (UIColor *)warningColor;

/**
 * 提示颜色，通常作为提示性控件的背景色，一般用来对用户的交互进行响应
 * 默认值为 #00CC99
 * 支持自定义配置
 */
- (UIColor *)tipsColor;

/**
 * 引导颜色，通常作为引导性控件的背景色，一般用来对用户进行引导
 * 默认值为 #1989FA
 * 支持自定义配置
 */
- (UIColor *)guideColor;

/**
 * Tab 栏选中颜色
 * 默认值为 #FF5A28
 * 支持自定义配置
 */
- (UIColor *)tabBarSelectedColor;

/**
 * 背景色，App 界面的背景色
 * 默认值为 #F8F8F8
 * 支持自定义配置
 */
- (UIColor *)backgroundColor;

/**
 * 导航栏背景色
 * 默认值为 #FFFFFF
 * 支持自定义配置
 * 如果自定义，将使用自定义的值
 * 如果未进行自定义，那么当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)navigationBarColor;

/**
 * 底部 Tab 栏背景色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)bottomTabBarBgColor;

/**
 * 卡片背景色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)cardBgColor;

/**
 * 弹窗内容背景色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)alertBgColor;

/**
 * 弹窗蒙层色
 * 默认值为 #000000 40%
 * 如果自定义 alertMaskAlpha，那么弹窗蒙层色等于 #000000 alpha=alertMaskAlpha
 * 如果并未自定义 alertMaskAlpha，那么当 backgroundColor 是浅色，
   弹窗蒙层色为 #000000 40%，当 backgroundColor 是深色，弹窗蒙层色为 #000000 70%
 */
- (UIColor *)alertMaskColor;

/**
 * 列表单元格背景颜色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)listCellBgColor;

/**
 * 大标题文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 90%
 */
- (UIColor *)headLineColor;

/**
 * 小标题文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 70%
 */
- (UIColor *)subheadColor;

/**
 * 辅助文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 50%
 */
- (UIColor *)auxiLiaryColor;

/**
 * 失效文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 30%
 */
- (UIColor *)disableColor;

/**
 * 主题背景下文字的颜色
 * 默认值为 #FFFFFF
 * 当 themeColor 是浅色，其值为 #000000
 * 当 themeColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)themeTextColor;

/**
 * 警告颜色下文字的颜色，通常作为警告性控件上文本的颜色，一般用来强烈地警告用户，
   吸引用户的注意
 * 默认值为 #FFFFFF
 * 当 warningColor 是浅色，其值为 #000000
 * 当 warningColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)warningTextColor;

/**
 * 提示颜色下文字的颜色，通常作为提示性控件上文本的颜色，一般用来对用户的交互进行响应
 * 默认值为 #FFFFFF
 * 当 tipsColor 是浅色，其值为 #000000
 * 当 tipsColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)tipsTextColor;

/**
 * 引导颜色下文字的颜色，通常作为引导性控件上文本的颜色，一般用来对用户进行引导
 * 默认值为 #FFFFFF
 * 当 guideColor 是浅色，其值为 #000000
 * 当 guideColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)guideTextColor;

/**
 * 导航栏文字颜色
 * 默认值为 #000000
 * 当 navigationBarColor 是浅色，其值为 #000000
 * 当 navigationBarColor 是深色，若 navigationBarColor 与 themeColor、warningColor、tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 90%
 */
- (UIColor *)navigationBarTextColor;