Working with themes

Themes allow users to apply variations in styling consistently across the application. For example, fonts of the UI literals, colors and sizes of the UI elements such as buttons, icons, and so on.

You can create new themes to apply styling consistently across the application.

About the default theme

When you install the application, the default theme is available in the <WSCDEVWAR>/ngstore/style/themes/default folder. You will find the following resources under default:

images: This folder contains the following images:
- javaCompatibleLogo.jpg
- loading_big.gif
- ProductFavicon.ico
- productlogo.png
theme.properties.scss: This file contains the complete theming information for the default theme.

You will also find a sample theme along with the default theme.

Creating a theme

Create a folder structure similar to that of default theme for the <new theme> under the themes folder in <RUNTIME>/extensions/ngstore/style/.
Depending on the changes that you want in the new theme, perform any of the following tasks:
- To change the application images provided in the default theme, copy all the images from the default theme to the images folder of the <new theme> and override the images as required. However, the new images must have the same name as in the default theme.
- To change a font, color, or size of an element, copy the corresponding entry from the theme.properties.scss file to the <new_theme.properties.scss> file and modify it appropriately.

In the ngstore.gulp.config.json file, add entries for you new theme by following the entries available for the default and sample themes as shown in the following code snippet:

"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/*"
             		}
      			]

			},

Run the gulp scripts to compile the SCSS files to CSS format and generate the minified files. On completion, the themes are made available in the <WSCDEVWAR>\ngstore\style\

Adding themes to database

You cannot create or add themes from the user interface. Therefore, you must use the manageCommonCode API with code type as "WEB_STORE_THEME". This creates the theme options that can be selected in the Sterling Business Center for an enterprise.

After the administrator selects a theme from available options, the theme is persisted against the rule "WSC_STORE_THEME". When the Sterling Store Engagement application loads, the getRuleDetails API is called with rule name as WSC_STORE_THEME to get the theme set up for the enterprise.

Applying a theme

To apply a theme for your enterprise, refer Configuring display options.