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 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-pod-specs.git'
source 'https://cdn.cocoapods.org/'
platform :ios, '11.0'

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

Configure theme

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 BizBundle supports both light and dark themes, which can be switched manually or set to follow the system automatically. 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 thing_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 color configuration options.

   • colors: Light theme
   • blackColors: Dark theme

   {
       "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
       }
   }
   

Both light and dark themes support the following:

• themeColor: Theme color
• backgroundColor: Background color
• warningColor: Warning color
• tipsColor: Tip color
• guideColor: Guide color
• navigationBarColor: Navigation bar background color
• tabBarSelectedColor: Active bar color
• alertMaskAlpha: Mask transparency of dialog box

Method 2: API request

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

}

Switch theme

Switch theme mode

The app defaults to the light theme, but you can change it using the following methods.

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

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

According to the system definition, the theme settings include the following enumerations:

• unspecified: Follow the system.
• light: Use the light theme.
• dark: Use the dark theme.

Current theme mode

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

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

Check for dark theme

When the theme mode is set to follow the system, you can check if the current theme is dark using the following method.

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

// Check if the dark theme is being used.
impl?.isDarkMode();

Listen for changes in theme mode

Register the notification of theme changes to listen for theme switching events.

extern NSString * const cThingThemeChangedNotification;

An extension for theme switching has been added to the view, which is useful when the layer redraws the scene while changing themes.

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

Examples

When developing a UI page, you can get the current theme color using the following method.

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

Default settings for dark and light themes

Differentiate between dark and light themes using 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 light.
 * When `backgroundColor` is dark, 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 light, this value is `#FFFFFF`.
 * When `backgroundColor` is dark, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)bottomTabBarBgColor;

/**
 * The background color of a card.
 * Default value: #FFFFFF
 * When `backgroundColor` is light, this value is `#FFFFFF`.
 * When `backgroundColor` is dark, 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 light, this value is `#FFFFFF`.
 * When `backgroundColor` is dark, 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 light, the mask color of a dialog box is `#000000 40%`. When `backgroundColor` is dark, 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 light, this value is `#FFFFFF`.
 * When `backgroundColor` is dark, this value is the mix of `backgroundColor` and `#FFFFFF 10%`.
 */
- (UIColor *)listCellBgColor;

/**
 * The text color of a headline.
 * Default value: #000000
 * When `backgroundColor` is light, this value is `#000000`.
 * When `backgroundColor` is dark 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 light, this value is `#000000`.
 * When `backgroundColor` is dark 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 light, this value is `#000000`.
 * When `backgroundColor` is dark 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 light, this value is `#000000`.
 * When `backgroundColor` is dark 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 light, this value is `#000000`.
 * When `themeColor` is dark, 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 light, this value is `#000000`.
 * When `warningColor` is dark, 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 light, this value is `#000000`.
 * When `tipsColor` is dark, 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 light, this value is `#000000`.
 * When `guideColor` is dark, this value is `#FFFFFF`.
 */
- (UIColor *)guideTextColor;

/**
 * The text color in a navigation bar.
 * Default value: #000000
 * When `navigationBarColor` is light, this value is `#000000`.
 * When `navigationBarColor` is dark 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;