处理主题

在线编辑

主题允许用户在应用程序中一致地应用样式的变体。例如， UI 文字的字体，按钮，图标等 UI 元素的颜色和大小。

您可以创建新主题以在应用程序中一致地应用样式。

关于缺省主题

安装应用程序时， <WSCDEVWAR>/ngstore/style/themes/default 文件夹中提供了缺省主题。您将在 default下找到以下资源:

images: 此文件夹包含以下图像:
- javaCompatibleLogo.jpg
- loading_big.gif
- ProductFavicon.ico
- productlogo.png
theme.properties.scss: 此文件包含缺省主题的完整主题信息。

您还将找到 sample 主题以及 default 主题。

创建主题

在 <RUNTIME>/extensions/ngstore/style/中的 themes 文件夹下为 <new theme> 创建类似于 default 主题的文件夹结构。
根据您要在新主题中进行的更改，执行以下任何任务:
- 要更改 default 主题中提供的应用程序图像，请将所有图像从 default 主题复制到 <new theme> 的 images 文件夹，并根据需要覆盖这些图像。但是，新图像的名称必须与 default 主题中的名称相同。
- 要更改元素的字体，颜色或大小，请将相应条目从 theme.properties.scss 文件复制到 <new_theme.properties.scss> 文件并进行相应修改。

在 ngstore.gulp.config.json 文件中，通过遵循可用于 default 和 sample 主题的条目，为新主题添加条目，如以下代码片段中所示:

"theme":{
				"files" :[
					["store/style/themes/store.scss"],
					["store/style/themes/store_rtl.scss"],
					["store/style/themes/wsc-padss.scss"]
				],
				"fonts": "store/style/themes/fonts/*",
				"defaultThemeFile": "theme-properties",
				"themeList": [
             		{
             			"themeName":"default",
             			"images": "store/style/themes/default/images/*"
             		},
             		{
             			"themeName":"sample",
             			"themeFile":"theme-properties",
             			"images": "store/style/themes/sample/images/*"
             		}
{
             			"themeName":"<new_theme>",
             			"themeFile":"<new_theme-properties>",
             			"images": "store/style/themes/<new_theme>/images/*"
             		}
      			]

			},

运行 Gulp 脚本以将 SCSS 文件编译为 CSS 格式并生成缩小的文件。完成后，将在 <WSCDEVWAR>\ngstore\style\ 中提供主题

向数据库添加主题

不能从用户界面创建或添加主题。因此，必须使用代码类型为 "WEB_STORE_THEME" 的 manageCommonCode API。这将创建可在 Sterling Business Center 中为企业选择的主题选项。

管理员从可用选项中选择主题后，将针对规则 "WSC_STORE_THEME" 持久存储该主题。当 Sterling Store Engagement 应用程序装入时，将使用规则名称 WSC_STORE_THEME 调用 getRuleDetails API ，以获取为企业设置的主题。

应用主题

要为企业应用主题，请参阅配置显示选项。