pip-webui2-themes-temp

Pip.WebUI 2 Themes module contains a mechanism to define and dynamically switch color themes for both Angular Material and custom controls.

Usage no npm install needed!

<script type="module">
  import pipWebui2ThemesTemp from 'https://cdn.skypack.dev/pip-webui2-themes-temp';
</script>

README

Pip.WebUI Logo
Color Themes

Pip.WebUI 2 Themes module contains a mechanism to define and dynamically switch color themes for both Angular Material and custom controls.

Using

Add module to imports:

import { PipThemesModule } from 'pip-webui2-themes';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    PipThemesModule,
    ...
  ],
  providers: [],

  bootstrap: [AppComponent]
})
export class AppModule { }

Use service to change theme, get theme list and name of current theme.

import { PipThemesService, Theme } from 'pip-webui2-themes';

export class AppComponent {
    public themes: Theme[];
    public theme: Theme;

    constructor(
        private service: PipThemesService
    ) {
        this.themes = this.service.themes;
        this.theme = this.service.selectedTheme;
    }

    changeTheme() {
        this.service.selectedTheme = this.theme;
  }
}

Theme model:

class Theme {
    name: string;
    palette: string = 'light';
}

Installation

To install this module using npm:

npm install pip-webui2-themes --save

License

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