Theme Color Configuration BizBundle

Theme Color Configuration BizBundle is used to configure different UI color schemes in the Smart Life App SDK. You can apply these colors to your app development. This way, the BizBundle can maintain consistency with your color schemes.

Integrate the BizBundle

Add the components of the Theme Color Configuration BizBundle to the Podfile and run the command pod update.

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

target 'your_target_name' do
  # Add the BizBundle.
  pod 'ThingSmartThemeManagerBizBundle'
end

Implement the BizBundle

You can use the BizBundle to configure different UI color schemes in the Smart Life App SDK and apply these colors to your app development.

The following options can be customized: theme color, background color, warning background color, success background color, guide background color, navigation bar background color, active tab color, and mask transparency of a dialog box. You can use any of the following two methods to configure these options:

Method 1: Configuration file

1. Make sure that the file ty_custom_config.json exists in the root directory of your project. If not, add it to the root directory. For more information, see Integrate with Framework.

2. Add the following color settings:

   {
       "config": {
           ...
       },
           "colors":{
           "themeColor": "#FF5A28",
           "backgroundColor": "#F8F8F8",
           "warningColor": "#FF4444",
           "tipsColor": "#00CC99",
           "guideColor": "#1989FA",
           "navigationBarColor": "#FFFFFF",
           "tabBarSelectedColor": "#FF5A28", 
           "alertMaskAlpha": 0.4
       }
   }
   

Method 2: API request

configNormalModuleWithThemeColor:backgroundColor:warningColor:tipsColor:guideColor:navigationBarColor:tabBarSelectedColor:alertMaskAlpha:

ObjC:

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

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

    id<ThingThemeManagerProtocol> impl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingThemeManagerProtocol)];
    [impl configNormalModuleWithThemeColor:[UIColor ty_colorWithHexString:@"FF5A28"]
                           backgroundColor:[UIColor ty_colorWithHexString:@"F8F8F8"]
                                 warningColor:[UIColor ty_colorWithHexString:@"FF4444"]
                                    tipsColor:[UIColor ty_colorWithHexString:@"00CC99"]
                                   guideColor:[UIColor ty_colorWithHexString:@"1989FA"]
                           navigationBarColor:[UIColor ty_colorWithHexString:@"FFFFFF"]
                          tabBarSelectedColor:[UIColor ty_colorWithHexString:@"00FFFF"]
                               alertMaskAlpha:@(0.4)];

    //do something else
    ...
}

Swift:

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

     let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol
     impl?.configNormalModule(withThemeColor: UIColor.ty_color(withHexString: "FF0000"),
                                 backgroundColor: UIColor.ty_color(withHexString: "000000"),
                                 warningColor: UIColor.ty_color(withHexString: "0000FF"),
                                 tipsColor: UIColor.ty_color(withHexString: "FFFF00"),
                                 guideColor: UIColor.ty_color(withHexString: "FF00FF"),
                                 navigationBarColor: UIColor.ty_color(withHexString: "FFFFFF"),
                                 tabBarSelectedColor: UIColor.ty_color(withHexString: "00FFFF"),
                                 alertMaskAlpha: 0.9)

    //do something else
    ...

}

Example

ObjC:

#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
...

Default dark and light color settings

Distinguish between dark and light colors by using the values of the hue, saturation, and brightness (HSB) color model.

/**
 * The theme color that is used as the background color of a button in most cases.
 * Default value: `#FF5A28`
 * It can be customized.
 */
- (UIColor *)themeColor;

/**
 * The warning color that is used as the background color of a warning control in most cases. This color can attract users' strong attention.
 * Default value: `#FF4444`
 * It can be customized.
 */
- (UIColor *)warningColor;

/**
 * The tip color that is used as the background color of a tip control in most cases. This color applies to the interactions with users.
 * Default value: `#00CC99`
 * It can be customized.
 */
- (UIColor *)tipsColor;

/**
 * The guide color that is used as the background color of a guide control in most cases. This color applies to the guides for users.
 * Default value: `#1989FA`
 * It can be customized.
 */
- (UIColor *)guideColor;

/**
 * The color for an active tab.
 * Default value: `#FF5A28`
 * It can be customized.
 */
- (UIColor *)tabBarSelectedColor;

/**
 * The background color of the app pages.
 * Default value: `#F8F8F8`
 * It can be customized.
 */
- (UIColor *)backgroundColor;

/**
 * The background color of the navigation bar.
 * Default value: `#FFFFFF`
 * It can be customized.
 * The custom setting prevails.
 * If this value is not customized, it defaults to `#FFFFFF` when `backgroundColor` is a light color.
 * When `backgroundColor` is a dark color, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)navigationBarColor;

/**
 * The background color of a bottom tab.
 * Default value: `#FFFFFF`
 * When `backgroundColor` is a light color, this value is `#FFFFFF`.
 * When `backgroundColor` is a dark color, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)bottomTabBarBgColor;

/**
 * The background color of a card.
 * Default value: `#FFFFFF`
 * When `backgroundColor` is a light color, this value is `#FFFFFF`.
 * When `backgroundColor` is a dark color, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)cardBgColor;

/**
 * The background color of a dialog box.
 * Default value: `#FFFFFF`
 * When `backgroundColor` is a light color, this value is `#FFFFFF`.
 * When `backgroundColor` is a dark color, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)alertBgColor;

/**
 * The mask color of a dialog box.
 * Default value: `#000000 40%`
 * If `alertMaskAlpha` is customized, the mask color of a dialog box is `#000000 alpha=alertMaskAlpha`.
 * If `alertMaskAlpha` is not customized, when `backgroundColor` is a light color,
   the mask color of a dialog box is `#000000 40%`. When `backgroundColor` is a dark color, the mask color of a dialog box is `#000000 70%`.
 */
- (UIColor *)alertMaskColor;

/**
 * The background color of a cell in a list.
 * Default value: `#FFFFFF`
 * When `backgroundColor` is a light color, this value is `#FFFFFF`.
 * When `backgroundColor` is a dark color, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)listCellBgColor;

/**
 * The text color of a headline.
 * Default value: `#000000`
 * When `backgroundColor` is a light color, this value is `#000000`.
 * When `backgroundColor` is a dark color that is the same as any of `themeColor`, `warningColor`,
   `tipsColor`, `guideColor`, and `tabBarSelectedColor`, this value is `#FFFFFF`.
   Otherwise, this value is `#FFFFFF 90%`.
 */
- (UIColor *)headLineColor;

/**
 * The text color of a heading.
 * Default value: `#000000`
 * When `backgroundColor` is a light color, this value is `#000000`.
 * When `backgroundColor` is a dark color that is the same as any of `themeColor`, `warningColor`,
   `tipsColor`, `guideColor`, and `tabBarSelectedColor`, this value is `#FFFFFF`.
   Otherwise, this value is `#FFFFFF 70%`.
 */
- (UIColor *)subheadColor;

/**
 * The color of auxiliary text.
 * Default value: `#000000`
 * When `backgroundColor` is a light color, this value is `#000000`.
 * When `backgroundColor` is a dark color that is the same as any of `themeColor`, `warningColor`,
   `tipsColor`, `guideColor`, and `tabBarSelectedColor`, this value is `#FFFFFF`.
   Otherwise, this value is `#FFFFFF 50%`.
 */
- (UIColor *)auxiLiaryColor;

/**
 * The color of disabled text.
 * Default value: `#000000`
 * When `backgroundColor` is a light color, this value is `#000000`.
 * When `backgroundColor` is a dark color that is the same as any of `themeColor`, `warningColor`,
   `tipsColor`, `guideColor`, and `tabBarSelectedColor`, this value is `#FFFFFF`.
   Otherwise, this value is `#FFFFFF 30%`.
 */
- (UIColor *)disableColor;

/**
 * The text color for a theme background.
 * Default value: `#FFFFFF`
 * When `themeColor` is a light color, this value is `#000000`.
 * When `backgroundColor` is a dark color, this value is `#FFFFFF`.
 */
- (UIColor *)themeTextColor;

/**
* The text color that is used for a warning control in most cases. This color can attract users' strong attention.
 * Default value: `#FFFFFF`
 * When `warningColor` is a light color, this value is `#000000`.
 * When `warningColor` is a dark color, this value is `#FFFFFF`.
 */
- (UIColor *)warningTextColor;

/**
 * The text color that is used for a tip control in most cases. This color applies to the interactions with users.
 * Default value: `#FFFFFF`
 * When `tipsColor` is a light color, this value is `#000000`.
 * When `tipsColor` is a dark color, this value is `#FFFFFF`.
 */
- (UIColor *)tipsTextColor;

/**
 * The text color that is used for a guide control in most cases. This color applies to the guides for users.
 * Default value: `#FFFFFF`
 * When `guideColor` is a light color, this value is `#000000`.
 * When `guideColor` is a dark color, this value is `#FFFFFF`.
 */
- (UIColor *)guideTextColor;

/**
 * The text color in a navigation bar.
 * Default value: `#000000`
 * When `navigationBarColor` is a light color, this value is `#000000`.
 * When `navigationBarColor` is a dark color that is the same as any of `themeColor`, `warningColor`, `tipsColor`, `guideColor`, and `tabBarSelectedColor`, this value is `#FFFFFF`.
   Otherwise, this value is `#FFFFFF 90%`.
 */
- (UIColor *)navigationBarTextColor;

/**
 * @brief Applies the light color mode to the theme color, background color, warning background color, success background color, guide background color,
   navigation bar background color, and active tab color, and set the mask transparency of a dialog box.
 * @param themeColor The theme color. If you do not set this value, do not modify the following code block.
 * @param backgroundColor The background color. If you do not set this value, do not modify the following code block.
 * @param warningColor The warning color. If you do not set this value, do not modify the following code block.
 * @param tipsColor The tip color. If you do not set this value, do not modify the following code block.
 * @param guideColor The guide color. If you do not set this value, do not modify the following code block.
 * @param navigationBarColor The navigation bar color. If you do not set this value, do not modify the following code block.
 * @param tabBarSelectedColor The active bar color. If you do not set this value, do not modify the following code block.
 * @param alertMaskAlpha The mask transparency of a dialog box. Valid values: `0` to `1`. If you do not set this value, the setting depends on `backgroundColor`.
 * @warning Before `application:didFinishLaunchingWithOptions:` returns `true`
   and before the UI is created, do not make any configurations when the app is running and do not repeat the configurations.
 */
- (void)configNormalModuleWithThemeColor:(nullable UIColor *)themeColor
                         backgroundColor:(nullable UIColor *)backgroundColor
                               warningColor:(nullable UIColor *)warningColor
                                  tipsColor:(nullable UIColor *)tipsColor
                                 guideColor:(nullable UIColor *)guideColor
                         navigationBarColor:(nullable UIColor *)navigationBarColor
                        tabBarSelectedColor:(nullable UIColor *)tabBarSelectedColor
                             alertMaskAlpha:(nullable NSNumber *)alertMaskAlpha
NS_SWIFT_NAME(configNormalModule(withThemeColor:
                                 backgroundColor:
                                 warningColor:
                                 tipsColor:
                                 guideColor:
                                 navigationBarColor:
                                 tabBarSelectedColor:
                                 alertMaskAlpha:));