Create custom theme

[n2lose]

Hi,

Do you have a doc or guide to instruct about custom theme?
I have followed theme guide to create a custom theme. I also checkout the showcase material2-app and check the material2-app-theme.scss.
But it seems doesn't work well as on demo :
When click the toggle button, it switch and change all the color md-primary, md-accent, md-warn, background to the colors of dark theme :

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

What you did to import this scss file in the app? I just see in guide, we need to build this scss file to css and linked in the app.component.html.
Can i import it from stylesURLs in the app.component.ts instead of link in the html?
I have did imported in the app.component.ts, it seems doesn't work well. It just change the background color or main page, but it doesn't change the color of components as checkbox, radio, button,...
Here is my theme:

@import '~@angular/material/core/theming/_all-theme';

// Include non-theme styles for core.
@include md-core();

.default-theme {
  // Define a theme.
  $primary: md-palette($md-cyan, 500);
  $accent:  md-palette($md-amber, A200, A100, A400);
  $warn:    md-palette($md-deep-orange);

  // Create the theme object (a Sass map containing all of the palettes).
  $default-theme: md-light-theme($primary, $accent, $warn);
}

And here is the screen:

Could show me how to change the all the color of components which has class md-primary, md-accent, md-warn,...?

Thanks,
Lam

[edemirkan]

Hi @n2lose
You need to include the following to your scss file to apply the theme

@include angular-material-theme($default-theme);

Please check;
https://github.com/demirk4n/angular-material-demo/blob/master/src/angular-material-demo-theme.scss

[n2lose]

@demirk4n : I have included it, but it doesn't applied for anything.
Here is my-theme.scss :
`@import '~@angular/material/core/theming/all-theme';

// Include non-theme styles for core.
@include mat-core();
.default-theme {
$default-primary: mat-palette($mat-cyan, 500);
$default-accent: mat-palette($mat-pink, A200, A100, A400);
$default-warn: mat-palette($mat-red);

$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

@include angular-material-theme($default-theme);
}

// Create Nashtech theme
.nashtech-ui {
$nashtech-primary: mat-palette($mat-red, A700);
$nashtech-accent: mat-palette($mat-amber, A200, A100, A400);
$nashtech-warn: mat-palette($mat-deep-orange);

$nashtech-theme: mat-dark-theme($nashtech-primary, $nashtech-accent, $nashtech-warn);

@include angular-material-theme($nashtech-theme);
}
and i have already imported it like that:@import 'my-theme.scss';`

I known the angular-material-demo works fine. but i can't do it the same and i don't know what's something wrong in my code?

Event you see as the screen, the ripple background button, checkbox,...doesn't apply the color cyan A500 as i define.

Thanks,
Lam

[edemirkan]

I see you have created a default theme within .default-theme {}. A class definition as such should be explicitly applied . Use the code below to directly apply your default theme without putting in a class. If required you can toogle .nashtech-ui class to take over in <md-sidenav-container [class.nashtech-ui]="isNashtechUI"> with a true false toogle (eg <button md-button (click)="isNashtechUI = !isNashtechUI" class="app-sidebar-button">TOGGLE THEME</button>)

@import '~@angular/material/core/theming/all-theme';

// Include non-theme styles for core.
@include mat-core();
// --> directly applied
$default-primary: mat-palette($mat-cyan, 500);
$default-accent: mat-palette($mat-pink, A200, A100, A400);
$default-warn: mat-palette($mat-red);

$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

@include angular-material-theme($default-theme);

// Create Nashtech theme
.nashtech-ui {
$nashtech-primary: mat-palette($mat-red, A700);
$nashtech-accent: mat-palette($mat-amber, A200, A100, A400);
$nashtech-warn: mat-palette($mat-deep-orange);

$nashtech-theme: mat-dark-theme($nashtech-primary, $nashtech-accent, $nashtech-warn);

@include angular-material-theme($nashtech-theme);
}

[n2lose]

Hi @demirk4n,

As i have tried to run https://angular-material-demo.firebaseapp.com/ on my local, it works really good. I'm checking to see what's wrong in my app:

As you see the error, it doesn't reset some component as button, checkbox, radio button,... and background color is not fill.
If i import one of themes prebuilt in the index.html like this :

<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

It works fines, just have some mess when they use the color of indigo-pink.css, not same as my theme define.

I have check your https://angular-material-demo.firebaseapp.com/ and it no need to include that.
And here is my theme:
`@import '~@angular/material/core/theming/_all-theme.scss';

@include mat-core();

$primary: mat-palette($mat-cyan, 500);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red, A700);

$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

.nashtech-ui {
$primary: mat-palette($mat-red, A700);
$accent: mat-palette($mat-amber, A200, A100, A400);
$warn: mat-palette($mat-deep-orange);

$theme: mat-dark-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
}
`

Thanks,
Lam

[edemirkan]

Please push your current work into a repo so I can check all your code. Thanks.