# 如何自定义主题样式
AstroZero预置了很多默认样式，您可以对标准页面的主题样式进行自定义修改。
#### 场景描述
自定义主题时，可以自定义修改标准页面的样式。设置完并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。
例如，在标准页面中添加一个"表单"组件，并绑定数据对象为"Alarm"，选择前三个字段，添加"保存"和"重置"按钮，单击"完成"。然后先单击"保存"按钮，再单击"预览"按钮，效果如[图1启用前效果图]所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如[图2启用后效果图]所示。
图1启用前效果图   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286521.png "点击放大")
图2启用后效果图   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888000.png "点击放大")
![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png)
您需要熟悉CSS的Less代码编写规范，关于Less的内容请参考[Less介绍](https://less.bootcss.com/)。
#### 操作步骤
1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，进入经典版应用设计器。
2. 在左侧菜单栏下方，单击"配置"。 
   图3选择"主题配置"   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047396.png "点击放大")
   
   
3. 在"主题配置"页签，配置"显示名称"，该名称将会显示在运营配置页签。
4. 新建主题。 
   新建主题有如下两种方式，请根据需要选择所需的方式。
   - 代码化方式
     1. 在主题管理中，单击"代码化新建"，弹出"创建主题"页面，如[图4]，界面中包含了所有组件的样式。
        图4创建主题   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887996.png "点击放大") 
     
     2. 修改相关的组件样式代码，关于组件的介绍请参考[平台标准组件介绍](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0131.html)。
        例如，在输入框组件添加一个背景色，设置为红色，如[图5]。
        图5添加背景色   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286529.png "点击放大") 
     
     3. 修改样式后，输入"主题名称"，单击页面右上方的"保存"进行编译保存，如[图6]。
        图6编译保存   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126705.png "点击放大")
        ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png)
        若编译不成功，您需要修改主题配置，单击禁用该主题，再单击编辑按钮。
        
     
     4. 关闭"创建主题"页面，返回"主题配置"页签。
     
     5. 在主题列表中，单击刚配置好主题后的打开开关"OFF"，打开后显示如[图7]所示，启用该主题。
        图7开启主题   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286533.png "点击放大") 
      
   
   - 界面化方式
     1. 在主题管理中，单击"界面化新建"。
     
     2. 配置相关组件或者颜色、排版主题样式。 例如，修改按钮组件的样式，在左侧选择"按钮"组件，在中间区域直接修改界面参数设置样式。
        鼠标悬浮在界面参数上，会有参数说明。
        
     
     3. 在右侧设置"主题名称"，例如"按钮字体颜色为黄色"，单击页面右上方保存图标。 设置后，在租户库中会出现创建的主题。
        图8查看库   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126729.png "点击放大") 
     
     4. 打开标准页面，在右侧"库"中单击"新增库"，查找并引入主题库，单击"确定"。
        图9新增库   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286537.png)
        图10引入库   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286517.png "点击放大") 
      
    
   
   
5. 返回标准页面，单击"预览"按钮，在弹出的效果页面会看到自定义样式后的效果，如[图11]。
   
   图11代码化新建的效果界面   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047408.png "点击放大")