Theme Color Configuration BizBundle

This topic describes how to use the Theme Color Configuration BizBundle to configure different UI color schemes in the Smart Life App SDK. You can create static resource files with plug-ins and dynamically retrieve their color values through the SDK to ensure consistency with your color schemes.

Preparation

Create a project

Integrate Smart Life App SDK for Android into your project with Android Studio and add the BizBundle framework to your project.

Configure theme colors

This is an optional plug-in for theme color configurations. To use this plug-in and its components, when you add the BizBundle framework, you do not need to configure the theme resources in res/values/colors.xml and theme color assets resources in assets/thingTheme/ui_theme_config.json.

In this case, you must delete both types of resources to avoid resource conflict after the plug-in is integrated.

Integrate BizBundle

// in rootProject build.gradle
buildscript{
    dependencies{
        // Declare plugin version
        classpath "com.thingclips.smart:thingsmart-theme-open-plugin:2.0.5"
    }
}

// in application / library build.gradle
dependencies {
    // Depend on runtime library
    implementation "com.thingclips.smart:thingsmart-theme-open:2.0.6"
}

Prerequisites

Configure the following in the build.gradle file of your application to automatically generate the color resource for the corresponding static theme.

You can go to Theme > Dark Mode on the Tuya Developer Platform to preview the theme on an OEM app. For more information, see Customize UI.

apply plugin: 'com.thingclips.open.theme'
thingOpenTheme{
    //  Light theme configuration
    lightTheme {
        color{
            // Background color
            backgroundColor "#F8F8F8"
            // Theme color
            themeColor "#FF5A28"
            // Warning color
            warningColor "#FF4444"
            // Tip color
            tipColor "#00CC99"
            // Guide color
            guideColor "#1989FA"
            // Background color of active tab
            tabBarSelectColor "#FF5A28"
            // Background color of navigation bar
            navigationBarColor "#FFFFFF"
        }
        colorAlpha{
            // Mask transparency of a popup
            alertMaskAlpha 0.8
        }
    }
    // Dark theme configuration
    blackTheme {
        color{
            // Background color
            backgroundColor "#000000"
            // Theme color
            themeColor "#FF5A28"
            // Warning color
            warningColor "#FF4444"
            // Tip color
            tipColor "#00CC99"
            // Guide color
            guideColor "#1989FA"
            // Background color of active tab
            tabBarSelectColor "#FF5A28"
            // Background color of navigation bar
            navigationBarColor "#1A1A1A"
        }
        colorAlpha{
            // Mask transparency of popup
            alertMaskAlpha 0.8
        }
    }
}

Usage

Enable support for dark theme

Starting from the UI BizBundle v5.17.0, obscure resource configuration has been deprecated. Accordingly, you need to add a new configuration proxy class, such as AppConfig, in the Application module. The class needs to be defined as public, and there is no restriction on the class name. In the class, you should define a public, immutable static member property is_darkMode_support, and set its value to true to enable support for the dark theme.

@Keep
public class AppConfig {
    /** Switch for supporting dark mode theme */
    public static final boolean is_darkMode_support = true;
}

Next, you also need to enable the configuration proxy class defined above. The following sample code still takes AppConfig as an example. Typically, for an application-level configuration proxy class, you can add a delegate before BizBundleInitializer.init to use the configuration.

PackConfig.addValueDelegate(AppConfig.class);
// You can choose to use assertions to test whether the configuration value takes effect.
// assert PackConfig.staticValueBoolean("is_darkMode_support", false) == true;

Change theme

If you allow users to switch between light and dark themes in the mobile app, use the following methods to restart the app after they change the theme.

//  Get the theme mode preferences.
ThingTheme.getAppUiMode()

//  Follow the system
ThingTheme.enableFollowSystem()

// Dark theme
ThingTheme.enableDarkMode()

// Light theme
ThingTheme.enableNormalMode()

Set theme

If theme switching is not enabled for the app, you can use the following method to set a mode other than the light theme. It is recommended to set the theme after BizBundleInitializer.init during the app startup. It is preferred to apply the theme used before the app was last closed.

// Get the theme mode preferences.
NightModeUtil.getAppNightMode()

// Dark theme
NightModeUtil.setAppNightMode(AppUiMode.MODE_DARK)

// Light theme
NightModeUtil.setAppNightMode(AppUiMode.MODE_LIGHT)

Listen for theme changes

If the theme is set to follow the system, you need to listen for theme switching using the following methods.

val themeService: AbsThemeService? = MicroContext.findServiceByInterface(AbsThemeService::class.java.name)
private val themeCallback: ThemeCallback = object : ThemeCallback {
    // This callback is invoked when the theme mode changes if the current theme is Follow System.
    override fun onUiModeChanged(isDark: Boolean) {}

    // If the current theme is Follow System, this callback notifies the current theme mode whenever an activity is created.
    override fun beforeViewUpdated(activity: Activity, isDark: Boolean) {}
}
// Register a listener for  theme changes.
themeService?.registerThemeCallback(themeCallback)

// Remove a listener for  theme changes.
themeService?.unregisterThemeCallback(themeCallback)

Get color settings

The color scheme of the feature returned by ThingOptimusSdk.getManager(IThingThemeManager.class) automatically changes with the light or dark theme. For example, when the theme is set to dark with NightModeUtil.INSTANCE.setAppNightMode(AppUiMode.MODE_DARK);, IThingThemeManager returns the color values for that theme.

interface IThingThemeManager {
    /**
     * Theme color, typically used as the background color for buttons
     * @return Int
     */
    @ColorInt
    fun getThemeColor() : Int

    /**
     * Warning color, typically used as the background for warning controls to effectively alert users and capture their attention.
     * @return Int
     */
    @ColorInt
    fun getWarningColor() : Int

    /**
     * Tip color, typically used as the background color for tip controls, responding to user interactions.
     * @return Int
     */
    @ColorInt
    fun getTipsColor() : Int

    /**
     * Guide color, typically used as the background color for guide controls to direct users.
     * @return Int
     */
    @ColorInt
    fun getGuideColor() : Int

    /**
     * Background  color of active tab
     * @return Int
     */
    @ColorInt
    fun getTabBarSelectedColor() : Int

    /**
     * Background color of the app interface
     * @return Int
     */
    @ColorInt
    fun getBackgroundColor() : Int

    /**
     * Background color of navigation bar
     * @return Int
     */
    @ColorInt
    fun getNavigatorBgColor() : Int

    /**
     * Background color of  bottom tab bar
     * @return Int
     */
    @ColorInt
    fun getBottomTabBarBgColor() : Int

    /**
     * Background color of card
     * @return Int
     */
    @ColorInt
    fun getCardBgColor() : Int

    /**
     * Background color of popup
     * @return Int
     */
    @ColorInt
    fun getAlertBgColor() : Int

    /**
     * Mask color of popup
     * @return Int
     */
    @ColorInt
    fun getAlertMaskColor() : Int

    /**
     * Background color of list cells
     * @return Int
     */
    @ColorInt
    fun getListCellBgColor() : Int

    /**
     * Headline text color
     * @return Int
     */
    @ColorInt
    fun getHeadLineColor() : Int

    /**
     * Subheading text color
     * @return Int
     */
    @ColorInt
    fun getSubHeadColor() : Int

    /**
     * Auxiliary text color
     * @return Int
     */
    @ColorInt
    fun getAuxiLibiaryColor() : Int

    /**
     * Disabled text color
     * @return Int
     */
    @ColorInt
    fun getDisableColor() : Int

    /**
     * The color of the text under the theme background
     * @return Int
     */
    @ColorInt
    fun getThemeTextColor() : Int

    /**
     * Text color for warnings, typically used on warning controls, to effectively alert users and capture their attention.
     * @return Int
     */
    fun getWarningTextColor() : Int

    /**
     * Text color for tips, typically used as the text color on hint controls, to respond to user interactions.
     * @return Int
     */
    @ColorInt
    fun getTipsTextColor() : Int

    /**
     * Text color for guides, typically used as the text color on guide controls, to direct users.
     * @return Int
     */
    @ColorInt
    fun getGuideTextColor() : Int

    /**
     * The text color in the navigation bar
     * @return Int
     */
    @ColorInt
    fun getNavigatorTextColor() : Int
}

To use the static resources, apply the color values from the resource files located in thingsrc/ui-open-theme-values/res of the application module. The light theme and dark theme are located at thingsrc/ui-open-theme-values/res/values and thingsrc/ui-open-theme-values/res/value-nights respectively.

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <!--
Automatically generated files, please do not modify it manually!!!
-->
    <color name="thing_theme_open_color_theme">#ffff5a28</color>
    <color name="thing_theme_open_color_warning">#ffff4444</color>
    <color name="thing_theme_open_color_tips">#ff00cc99</color>
    <color name="thing_theme_open_color_guide">#ff1989fa</color>
    <color name="thing_theme_open_color_tab_bar_selected">#ffff5a28</color>
    <color name="thing_theme_open_color_background">#fff8f8f8</color>
    <color name="thing_theme_open_color_navigator_bg">#ffffffff</color>
    <color name="thing_theme_open_color_bottom_tab_bar">#ffffffff</color>
    <color name="thing_theme_open_color_card_bg">#ffffffff</color>
    <color name="thing_theme_open_color_alert_bg">#ffffffff</color>
    <color name="thing_theme_open_color_alert_mask">#ffff5a28</color>
    <color name="thing_theme_open_color_list_cell_bg">#ffff5a28</color>
    <color name="thing_theme_open_color_head_line_text">#e6000000</color>
    <color name="thing_theme_open_color_sub_head_text">#b3000000</color>
    <color name="thing_theme_open_color_auxi_libiary_text">#80000000</color>
    <color name="thing_theme_open_color_disable_text">#4c000000</color>
    <color name="thing_theme_open_color_theme_text">#ffffffff</color>
    <color name="thing_theme_open_color_warning_text">#ffffffff</color>
    <color name="thing_theme_open_color_tips_text">#ffffffff</color>
    <color name="thing_theme_open_color_guide_text">#ffffffff</color>
</resources>