# 配置主题
#### 场景描述
设置并启用主题后，该应用中标准页面相同组件的展示将以主题中配置为准。
例如，标准页面中表单的按钮展示如[图1]所示。在主题中配置该按钮中字体为黄色，启用主题使得标准页面表单按钮字体颜色变成黄色。
图1启用主题前标准页面预览效果   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886612.png "点击放大")
#### 前提条件
请先熟悉CSS的Less代码编写规范。
#### 操作步骤
1. 参考[如何进入经典开发环境](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0003.html#astrozero_05_0003__section47067717379)中操作，进入经典版开发环境。
2. 在"首页 \> 项目 \> 我的应用"中，单击对应的应用，进入应用开发页面。
3. 在页面左下角，选择"配置"，进入应用配置页面。
4. 在"主题配置"页签，配置"显示名称"，该名称将会显示在运营配置页签。
5. 新建主题，两种方式选择其中之一执行即可。 
   - 代码化方式
     1. 在主题配置页签，单击"代码化新建"。
     
     2. 配置相关组件代码。 例如，修改表单按钮组件的字体颜色。在左侧选择"表单 \> 按钮"，在中间区域表单按钮设置的Less代码中添加按钮字体颜色代码"color:#F8E71C;"。
        ```
        &-primary {
        .btn-primary;
        color:#F8E71C;
        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
        border-right-color: @btn-group-border;
        border-left-color: @btn-group-border;
                }
        ```
        
     
     3. 在右侧设置"主题名称"为"表单按钮字体颜色"，单击页面右上方保存图标。
     
     4. 关闭"创建主题"页面，返回"主题配置"页签，在主题列表中单击刚配置好主题后的"OFF"，启用该主题。 若上一步编译不成功，需要修改主题配置，修改主题配置需要单击"ON"禁用该主题，再单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886616.png)。
        
      
   
   - 界面化方式
     1. 在主题配置页签，单击"界面化新建"。
     
     2. 配置相关组件或者颜色、排版主题样式。 例如，修改按钮组件的样式，在左侧选择"组件 \> 按钮"组件，在中间区域直接修改界面参数设置样式。
        图2修改界面参数设置样式   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046004.png "点击放大") 
     
     3. 在右侧设置"主题名称"，例如"按钮字体颜色为黄色"，单击页面右上方保存图标。
        图3设置主题名称   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886608.png "点击放大")
        设置后，在租户库中会出现创建的主题"按钮字体颜色为黄色"。
        图4查看已创建的主题   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886604.png "点击放大") 
     
     4. 打开标准页面，在右侧"库"中单击"新增库"，查找并引入主题库"按钮字体颜色为黄色"，单击"确定"。
        图5在标准页面引入主题库   
        ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125333.png "点击放大") 
      
   
   
   
   
6. 预览标准页面，查看效果。 
   显示如[图6]所示，表示配置成功。
   图6启用主题后标准页面预览效果   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046008.png "点击放大")