配置主题

场景描述

设置并启用主题后，该应用中标准页面相同组件的展示将以主题中配置为准。

例如，标准页面中表单的按钮展示如图1所示。在主题中配置该按钮中字体为黄色，启用主题使得标准页面表单按钮字体颜色变成黄色。

图1 启用主题前标准页面预览效果

前提条件

请先熟悉CSS的Less代码编写规范。

操作步骤

1. 参考如何进入经典开发环境中操作，进入经典版开发环境。
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”禁用该主题，再单击。

   • 界面化方式
     1. 在主题配置页签，单击“界面化新建”。
     2. 配置相关组件或者颜色、排版主题样式。

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

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

        设置后，在租户库中会出现创建的主题“按钮字体颜色为黄色”。

        图4 查看已创建的主题
        
     4. 打开标准页面，在右侧“库”中单击“新增库”，查找并引入主题库“按钮字体颜色为黄色”，单击“确定”。
        图5 在标准页面引入主题库
        

6. 预览标准页面，查看效果。
   显示如图6所示，表示配置成功。

   图6 启用主题后标准页面预览效果