Document Properties
KbidS29393
Last Modified22-Apr-2020
Added to KB29-Apr-2020
Public AccessEveryone
StatusOnline
Doc TypeGuidelines, Concepts & Cookbooks
ProductIntershop 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
Support Tickets