Multi Themes for Angular Material app

Demo

MaterialMultithemes

Step 1: Install rb-material-multithemes and Angular Material

NPM

npm install --save rb-material-multithemes
npm install --save @angular/material @angular/cdk

Import RbMaterialMultithemes into AppModule with the forRoot method.

/*----  src/app/app.module.ts     -----*/
import { RbMaterialMultithemes } from 'rb-material-multithemes';

@NgModule({
  ...
  imports: [
   RbMaterialMultithemesModule.forRoot()
  ],
  ...
})
export class AppModule.ts { }

Note: only use forRoot () in the AppModule. For other modules you should only import RbMaterialMultithemesModule without methods.

Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

NPM

npm install --save @angular/animations

/*----  src/app/app.module.ts     -----*/
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule.ts { }

Step 3: Include Theme

Including a theme is required to apply all of the core and theme styles to your application. Open the .angular-cli.json file in the root folder of the projectopen the .angular-cli.json file in the root folder of the project and include _theme.scss in the styles property.

"styles": [
            "styles.scss",
            "../node_modules/rb-material-multithemes-beta/_themes.scss"
        ],

Usage

Use the tag <rb-material-multithemes> in the html of your component. This component will create a button and a menu with all the themes.

	<rb-material-multithemes>
	</rb-material-multithemes>

Extra

The module RbMaterialMultithemesModule also has a service which can be injected to subscribe and receive an object with the data of the current thema.

import { RbMaterialMultithemesService, Theme } from 'rb-material-multithemes-beta';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})

export class DemoComponent implements OnInit {
  themeInfo: Theme;
  constructor(private rbs: RbMaterialMultithemesService) { }
  
  ngOnInit() {
    this.rbs.getThemes$.subscribe(data=>{
      this.themeInfo = data;
      console.log(data);
    });
  }
}

rbs.getThemes$ when subscribed returns an object of type Tema that has the next structure:

export interface Theme {
    primary: string;
    accent: string;
    bg: string;
    text: string;
    class: string;
    imageLocal: string;
    imageUrl: string;
}

One point to clarify is that Theme has two properties that return 600x350 images that combine with thema (Use in Card or Sidenav). imageUrl for an https and imageLocal url for path in assets / folder.

To use local images download and unzip the file in assets:

DownLoad/ImagesGoogleDrive

License

MIT, see LICENSE.md for details.