主题色配置业务包

主题色配置业务包用于配置涂鸦 SDK 中 UI 相关的各种颜色。通过插件生成相关的静态资源文件，以及通过 SDK 动态获取相应色值，使用这些颜色开发页面，从而使 UI 业务包提供的界面和您自己搭建的界面达到颜色效果的一致性。

准备工作

创建工程

在 Android Studio 中建立您的工程，接入智能生活 App SDK 并完成业务包 框架接入。

主题色配置

本插件是主题色配置的可选功能插件，当接入使用本插件及其组件时，在 接入整体业务包框架 时，则不需要配置相关的 res/values/colors.xml 主题资源配置以及 assets/thingTheme/ui_theme_config.json 主题色 assets 资源配置。

具体地，您需要删除这两个资源配置，保证接入主题色配置业务包插件后不存在资源冲突的问题。

接入组件

// in rootProject build.gradle
buildscript{
    dependencies{
        // 声明插件版本
        classpath "com.thingclips.smart:thingsmart-theme-open-plugin:2.0.5"
    }
}

// in application / library build.gradle
dependencies {
    // 依赖运行时库
    implementation "com.thingclips.smart:thingsmart-theme-open:2.0.6"
}

配置准备

通过在工程 Application 模块的 build.gradle 中配置以下信息，可以自动生成对应静态主题色值的颜色资源。

您也可以通过涂鸦开发者平台的 主题风格/深色模式 进行对应的设置，以预览 OS OEM App 的展示效果。详细操作，参考 创建智能家居 OEM App 的 界面配置 章节。

apply plugin: 'com.thingclips.open.theme'
thingOpenTheme{
    // 浅色主题配置
    lightTheme {
        color{
            // 背景色
            backgroundColor "#F8F8F8"
            // 主题色
            themeColor "#FF5A28"
            // 警告色
            warningColor "#FF4444"
            // 提示色
            tipColor "#00CC99"
            // 引导色
            guideColor "#1989FA"
            // tab 选中背景色
            tabBarSelectColor "#FF5A28"
            // 导航栏背景色配置
            navigationBarColor "#FFFFFF"
        }
        colorAlpha{
            // 弹窗蒙层透明度
            alertMaskAlpha 0.8
        }
    }
    // 深色主题配置
    blackTheme {
        color{
            // 背景色
            backgroundColor "#000000"
            // 主题色
            themeColor "#FF5A28"
            // 警告色
            warningColor "#FF4444"
            // 提示色
            tipColor "#00CC99"
            // 引导色
            guideColor "#1989FA"
            // tab 选中背景色
            tabBarSelectColor "#FF5A28"
            // 导航栏背景色配置
            navigationBarColor "#1A1A1A"
        }
        colorAlpha{
            // 弹窗蒙层透明度
            alertMaskAlpha 0.8
        }
    }
}

使用

启用对深色主题的支持

自业务包 v5.17.0 版本开始，晦涩的资源配置已被废弃。相应地，您需要在应用的 Application 模块中新增一个配置项代理类，例如 AppConfig。该类需定义为公开，类名不作限制。在类体内，定义一个公开的不可修改的静态成员属性 is_darkMode_support，并将其赋值为 true，以便启用对于深色主题的支持。

@Keep
public class AppConfig {
    /** 主题色支持深色模式的开关 */
    public static final boolean is_darkMode_support = true;
}

下一步，您还需要启用上述定义的配置项代理类。下述示例代码仍以 AppConfig 为例。通常情况下，对于应用级的配置项代理类，您可以在 BizBundleInitializer.init 之前添加委托，以便使用该配置项。

PackConfig.addValueDelegate(AppConfig.class);
// 您可以选择使用断言来测试配置值是否生效
// assert PackConfig.staticValueBoolean("is_darkMode_support", false) == true;

切换模式

当在应用中提供切换模式的功能时，您可以使用如下的功能，以便在切换模式后重启应用。

// 获取应用模式的偏好设置
ThingTheme.getAppUiMode()

// 切换成跟随系统
ThingTheme.enableFollowSystem()

// 切换成深色主题
ThingTheme.enableDarkMode()

// 切换成浅色主题
ThingTheme.enableNormalMode()

设置模式

当您并未在应用中提供切换模式的功能，又想设置浅色主题以外的模式时，可以通过以下的功能实现。建议在应用启动时晚于 BizBundleInitializer.init 进行设置，同时最好能根据应用偏好的模式，来启用对应主题。即上次关闭应用前使用的模式，在下次启动应用时进行沿用。

// 获取应用偏好设置的模式
NightModeUtil.getAppNightMode()

// 设置成深色主题
NightModeUtil.setAppNightMode(AppUiMode.MODE_DARK)

// 设置成浅色主题
NightModeUtil.setAppNightMode(AppUiMode.MODE_LIGHT)

主题变更监听

当选择跟随系统模式时，您需要感知深浅主题的切换，可以通过以下的方式进行监听。

val themeService: AbsThemeService? = MicroContext.findServiceByInterface(AbsThemeService::class.java.name)
private val themeCallback: ThemeCallback = object : ThemeCallback {
    // 此回调将在应用设置跟随系统模式时，当系统主题模式变更时通知
    override fun onUiModeChanged(isDark: Boolean) {}

    // 当前模式为跟随系统时，此回调将在每个 activity 创建时通知当前的主题模式
    override fun beforeViewUpdated(activity: Activity, isDark: Boolean) {}
}
// 注册主题变更监听
themeService?.registerThemeCallback(themeCallback)

// 移除主题变更监听
themeService?.unregisterThemeCallback(themeCallback)

获取颜色配置

通过 ThingOptimusSdk.getManager(IThingThemeManager.class)，可以获取到对应的功能，调用功能返回的颜色配置是随着深浅主题下会自动切换的。例如，当通过 NightModeUtil.INSTANCE.setAppNightMode(AppUiMode.MODE_DARK); 设置成深色主题，此时通过功能获得的是深色主题下相应的颜色值。

interface IThingThemeManager {
    /**
     * 主题色，通常作为按钮的背景色
     * @return Int
     */
    @ColorInt
    fun getThemeColor() : Int

    /**
     * 警告颜色，通常作为警告性控件的背景色，一般用来强烈地警告用户，吸引用户的注意
     * @return Int
     */
    @ColorInt
    fun getWarningColor() : Int

    /**
     * 提示颜色，通常作为提示性控件的背景色，一般用来对用户的交互进行响应
     * @return Int
     */
    @ColorInt
    fun getTipsColor() : Int

    /**
     * 引导颜色，通常作为引导性控件的背景色，一般用来对用户进行引导
     * @return Int
     */
    @ColorInt
    fun getGuideColor() : Int

    /**
     * tab 栏选中颜色
     * @return Int
     */
    @ColorInt
    fun getTabBarSelectedColor() : Int

    /**
     * 背景色，app 界面的背景色
     * @return Int
     */
    @ColorInt
    fun getBackgroundColor() : Int

    /**
     * 导航栏背景色
     * @return Int
     */
    @ColorInt
    fun getNavigatorBgColor() : Int

    /**
     * 底部 tab 栏背景色
     * @return Int
     */
    @ColorInt
    fun getBottomTabBarBgColor() : Int

    /**
     * 卡片背景色
     * @return Int
     */
    @ColorInt
    fun getCardBgColor() : Int

    /**
     * 弹窗内容背景色
     * @return Int
     */
    @ColorInt
    fun getAlertBgColor() : Int

    /**
     * 弹窗蒙层色
     * @return Int
     */
    @ColorInt
    fun getAlertMaskColor() : Int

    /**
     * 列表单元格背景颜色
     * @return Int
     */
    @ColorInt
    fun getListCellBgColor() : Int

    /**
     * 大标题文字颜色
     * @return Int
     */
    @ColorInt
    fun getHeadLineColor() : Int

    /**
     * 小标题文字颜色
     * @return Int
     */
    @ColorInt
    fun getSubHeadColor() : Int

    /**
     * 辅助文字颜色
     * @return Int
     */
    @ColorInt
    fun getAuxiLibiaryColor() : Int

    /**
     * 失效文字颜色
     * @return Int
     */
    @ColorInt
    fun getDisableColor() : Int

    /**
     * 主题背景下文字的颜色
     * @return Int
     */
    @ColorInt
    fun getThemeTextColor() : Int

    /**
     * 警告颜色下文字的颜色，通常作为警告性控件上文本的颜色，一般用来强烈地警告用户，吸引用户的注意
     * @return Int
     */
    fun getWarningTextColor() : Int

    /**
     * 提示颜色下文字的颜色，通常作为提示性控件上文本的颜色，一般用来对用户的交互进行响应
     * @return Int
     */
    @ColorInt
    fun getTipsTextColor() : Int

    /**
     * 引导颜色下文字的颜色，通常作为引导性控件上文本的颜色，一般用来对用户进行引导
     * @return Int
     */
    @ColorInt
    fun getGuideTextColor() : Int

    /**
     * 导航栏内的文字颜色
     * @return Int
     */
    @ColorInt
    fun getNavigatorTextColor() : Int
}

而当您需要调用静态资源时，可以直接调用 application module 下在 thingsrc/ui-open-theme-values/res 路径内生成的资源文件内的色值。这套配置分为浅色主题和深色主题两套，目录分别是在 thingsrc/ui-open-theme-values/res/values 和 thingsrc/ui-open-theme-values/res/value-nights。

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