PipWebui2 Themes

Pip.WebUI2 Themes module provides a mechanism to define, build and dynamically switch color themes for Angular Material projects.

Contents

• Installation
• How to
  • Step 1: Init
  • Step 2: Configuration of build
  • Step 3: Build
  • Step 4: Configuration of application
• Links
• License

Installation

To install this module using npm:

npm install pip-webui2-themes --save

How to

Step 1: Init

First thing you have to do is init module itself.

pip-webui2-themes init

Default initialization will create files themes.json and themes.scss in src directory, but you could define another source path with option --src like that:

pip-webui2-themes init --src ./

Step 2: Configuration of build

To configure which themes should be built and some build options you should edit themes.json file. You could check schema in this documentation page. Usually, you have to provide list of themes and output directory:

{
    "$schema": "../node_modules/pip-webui2-themes/themes.schema.json",
    "themes": [
        {
            "name": "pip-blue",
            "path": "../node_modules/pip-webui2-themes/assets/themes/pip-blue"
        },
        {
            "name": "pip-orange",
            "path": "../node_modules/pip-webui2-themes/assets/themes/pip-orange"
        },
        {
            "name": "pip-green",
            "path": "../node_modules/pip-webui2-themes/assets/themes/pip-green"
        },
        {
            "name": "pip-unicorn-dark",
            "path": "../node_modules/pip-webui2-themes/assets/themes/pip-unicorn-dark",
            "outputNamePattern": "pip-ud"
        }
    ],
    "output": {
        "directories": [
            "./assets/themes",
            "../dist/angular-app/assets/themes"
        ]
    }
}

NB! All paths should be relative to themes.json file or your custom config file.

Step 3: Build

When configuration is done it's time to build themes:

pip-webui2-themes build

Step 4: Configuration of application

Now you have your themes in provided output directories, but application doesn't recognize what's going on and what kind of themes it should use. That's why you have to import and configure angular module which provided by PipWebUI2 Themes.

Add module to imports:

import { PipThemesModule, Theme } from 'pip-webui2-themes';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  
  imports: [
    ...
    // Default import with default configuration
    // PipThemesModule,
    // Import with custom configuration which was described above
    PipThemesModule.withConfig({
      themes: [
        pipWebui2Themes.Blue,
        pipWebui2Themes.Orange,
        pipWebui2Themes.Green,
        // Use custom name which was provided in "outputNamePattern" property
        Object.assign({}, pipWebui2Themes.UnicornDark, {
          namePatterns: ['pip-ud']
        } as Theme)
      ]
    })
    ...
  ],
  providers: [],
 
  bootstrap: [AppComponent]
})
export class AppModule { }

And it's done! Now you could use this service to work with themes in any other component, service, etc. You could find some description of this module's service and models in the documentation.

Links

• PipWebUI2 Themes Documentation
• PipWebUI2 Workspace

License

This module is released under MIT license and totally free for commercial and non-commercial use.