主题管理

管理员登录 iPortal 后，在“管理”>“站点配置”>“站点定制”页面，点击左侧的“主题管理“， 会看到系统默认提供了蓝色、橙色、暗橙、暗红四套主题。其中蓝色、橙色主题是浅色系主题，暗橙、暗红是深色系主题。您可设置其中一种为门户的默认主题，也可下载主题，并基于下载的主题文件（json 格式）自定义一个新的主题并导入门户。配置完主题后，普通用户可在“个人中心”>“我的主题”页面设置偏好的站点主题风格。

设置默认主题

在操作栏，点击“设为默认主题”可将相应的主题设置为门户全站的默认主题。设置完后，未登录状态，门户都将使用设置的默认主题进行展示。登录状态，默认也会使用管理员设置的默认主题进行展示；若用户自己设置过主题，则会根据用户自己设置的主题进行展示。

更新主题

在操作栏，点击“更新主题”，在弹窗中分别输入主题的中文名、英文名，选择目标主题文件，点击“确定”即可更新主题。注意：系统默认提供的主题不支持更新操作。

下载主题

在操作栏，点击“下载主题”，即可下载相应主题的 json 文件。当您需要自定义新主题时，可下载最接近您需求的主题文件，进而基于下载的主题文件进行定制。

删除主题

在操作栏，点击“删除主题”，可删除相应的主题。注意：系统默认提供的主题不支持删除操作。

自定义新主题

iPortal 提供的主题支持以 json 格式下载，也支持导入新的 json 主题文件。json 主题文件内容主要由头部（header）、二级导航栏（resourceHeader）、内容（body）、组件（components）、底部（footer）组成，如下所示（以蓝色主题为例）。

{

    "themeSetting": {

        "version": "1.0",

        "header": {

            "backgroundColor": "rgb(255, 255, 255)",

            "color": "rgb(51, 51, 51)",

            "hoverBackgroundColor": "#f5f5f5",

            "hoverFontColor": "#1890FF"

        },

        "resourceHeader": {

            "backgroundColor": "#ffffff",

            "color": "#333333",

            "hoverFontColor": "#1890FF"

        },

        "body": {

            "backgroundColor": "#F7F8FA"

        },

        "components": {

            "primaryColor": "#1890FF",

            "textColor": "#333333",

            "subTextColor": "#666666",

            "promptTextColor": "#999999",

            "disabledColor": "#cccccc",

            "borderColorBase": "#d9d9d9",

            "subBorderColorBase": "rgba(0,0,0,0.06)",

            "backgroundColor": "#ffffff",

            "subBackgroundColor": "#ffffff",

            "activeBackgroundColor": "#F2FBFF",

            "thirdBackgroundColor": "#fafafa",

            "fourthBackgroundColor": "#ffffff"

        },

        "footer": {

            "backgroundColor": "rgb(255, 255, 255)",

            "color": "rgb(51, 51, 51)"

        }

    }

}

头部（header）

• backgroundColor：头部背景色
• color：头部文本色
• hoverBackgroundColor：鼠标经过一级导航栏每一项的背景色
• hoverFontColor：鼠标经过一级导航栏每一项的文本色。一般设置为主题色。

二级导航栏（resourceHeader）

• backgroundColor：二级导航栏背景色
• color：二级导航栏文本色
• hoverFontColor：鼠标经过二级导航栏每一项的文本色。一般设置为主题色。

内容（body）

• backgroundColor：页面内容区的背景色

组件（components）

页面内容（body）区用到的组件，如表单、输入框、侧边栏、列表、卡片等。

• primaryColor：主题色。选中组件或鼠标经过组件时，将使用主题色显色组件的文本或背景色。
• textColor：正常状态下，组件中主要文本的颜色。
• subTextColor：正常状态下，组件中次要文本的颜色。
• promptTextColor：提示文本色，如输入框中的默认输入内容，或输入框旁边的提示输入内容。
• disabledColor：组件被禁用时采用的颜色。
• borderColorBase：组件的主边框色。如输入框、按钮等的边框均使用主边框色。
• subBorderColorBase：组件的次边框色。一般用于页面中的分割条。
• backgroundColor：组件背景色
• subBackgroundColor：组件次背景色。一般用于编辑状态下，输入框内容的背景色。
• activeBackgroundColor：鼠标选中组件每一项的背景色。
• thirdBackgroundColor：组件第三背景色。一般用于表头、Tabs 标签页的填充。
• fourthBackgroundColor：组件第四背景色。一般用于下拉菜单背景色、气泡背景色。

底部（footer）

• backgroundColor：底部背景色
• color：底部文本色

示例：

自定义新主题时，建议您下载与您项目需求最接近的主题文件进行定制。例如，定制一个浅色系的红色主题，您可下载系统提供的蓝色主题文件，然后修改头部（header）的 hoverFontColor 、二级导航栏（resourceHeader）的hoverFontColor 和组件（components）中的 primaryColor 为红色色值，如“#E14D57”即可。若您要定制的主题变化较大，修改时，请参考上述各部分的字段介绍。

定制完成后，需要通过导入功能添加到 iPortal 中。步骤：

1. 点击“导入主题”；
2. 在弹窗中分别输入新主题的中文名、英文名，并选择新主题文件；
3. 点击“确定”即可导入新主题。

导入完成后，您可在“个人中心”>我的主题页面选择新主题，查看新主题的实际效果。也可继续修改主题后，通过更新操作更新主题。

注：iPortal 管理界面不支持主题的切换，您需在门户前端界面查看主题效果。