如何自定义主题样式

场景描述

自定义主题时，可以自定义修改标准页面的样式。设置完并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。

例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。然后先单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。

图1 启用前效果图

图2 启用后效果图

操作步骤

1. 参考如何登录经典应用设计器中操作，进入经典版应用设计器。
2. 在左侧菜单栏下方，单击“配置”。
   图3 选择“主题配置”
   

3. 在“主题配置”页签，配置“显示名称”，该名称将会显示在运营配置页签。
4. 新建主题。
   新建主题有如下两种方式，请根据需要选择所需的方式。

   • 代码化方式
     1. 在主题管理中，单击“代码化新建”，弹出“创建主题”页面，如图4，界面中包含了所有组件的样式。
        图4 创建主题
        
     2. 修改相关的组件样式代码，关于组件的介绍请参考平台标准组件介绍。

        例如，在输入框组件添加一个背景色，设置为红色，如图5。

        图5 添加背景色
        
     3. 修改样式后，输入“主题名称”，单击页面右上方的“保存”进行编译保存，如图6。
        图6 编译保存
        
        

        若编译不成功，您需要修改主题配置，单击禁用该主题，再单击编辑按钮。

     4. 关闭“创建主题”页面，返回“主题配置”页签。
     5. 在主题列表中，单击刚配置好主题后的打开开关“OFF”，打开后显示如图7所示，启用该主题。
        图7 开启主题
        
   • 界面化方式
     1. 在主题管理中，单击“界面化新建”。
     2. 配置相关组件或者颜色、排版主题样式。

        例如，修改按钮组件的样式，在左侧选择“按钮”组件，在中间区域直接修改界面参数设置样式。

        鼠标悬浮在界面参数上，会有参数说明。

     3. 在右侧设置“主题名称”，例如“按钮字体颜色为黄色”，单击页面右上方保存图标。

        设置后，在租户库中会出现创建的主题。

        图8 查看库
        
     4. 打开标准页面，在右侧“库”中单击“新增库”，查找并引入主题库，单击“确定”。
        图9 新增库
        
        图10 引入库
        

5. 返回标准页面，单击“预览”按钮，在弹出的效果页面会看到自定义样式后的效果，如图11。
   图11 代码化新建的效果界面