Related Github Documents
Document Properties
Kbid
S29393
Last Modified
22-Apr-2020
Added to KB
29-Apr-2020
Public Access
Everyone
Status
Online
Doc Type
Guidelines, Concepts & Cookbooks
Product
Intershop Progressive Web App

Guide - Intershop Progressive Web App - Multiple Themes

Multiple Themes

It is possible to create multiple themes for styling.
The Intershop Progressive Web App currently uses multi-theming to provide different styles for the B2C an the B2B application.
The styles for B2C are defined in /src/styles/themes/default/style.scss, for B2B in /src/themes/styles/blue/style.scss.

Using schematics to start customizing Intershop Progressive Web App prepares a theme for your own custom styling. (See Customizations - Start Customization)

You can also manually prepare a new theme:

  1. Create a custom theme folder (named custom) under /src/themes/styles/ with a copy of styles.scss and variables.scss from an available theme.

  2. Reference the styling theme in the angular.json, so that the theme bundle will be extracted during the compiling process

    ...
    "styles": [
      ...
      {
        "input": "src/styles/themes/custom/style.scss",
        "lazy": true,
        "bundleName": "custom"
      },
      ...
    ]
    ...
  3. Set the theme to be used in your application settings in the environment.ts

export const environment: Environment = {
  ...
  theme: 'custom',
};

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Tickets