Theme documentation doesn't work

[ghost]

Bug, feature request, or proposal:

BUG

What is the expected behavior?

Documentation does not specify where to include your custom color theme.scss file.

What is the current behavior?

Error Could not find Angular Material core theme

What are the steps to reproduce?

Follow these instructions:
https://material.angular.io/guide/theming

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

I want to modify fonts and colors using scss before any components or modules are loaded throwing the above error.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Every version including the latest.

Is there anything else we should know?

Your documentation is wrong or got left behind the most up to date procedures.

[willshowell]

Assuming this is somewhat in response to this #2800 (comment)...

You must @include mat-core() exactly once, and if you follow the guide, you will have done that.

[ghost]

@willshowell What file do I include @include mat-cor() in?

[willshowell]

This is the setup we've opted for:

// in styles/_custom_theme.scss
@import '~@angular/material/theming';

$primary: ...
$accent: ...
$warn: ...

$theme: mat-light-theme(...)

// in styles/required.scss
@import 'custom-theme';

@include mat-core();
@include angular-material-theme($theme);

// other global styles

// in .angular-cli.json

"apps": [{
  ...

  "styles": [
    "style/required.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [ "style" ]
  },

  ...
}]

[ghost]

Beautiful! So angular-cli does compile scss files. Where is the documentation for that?

#6068

[maxisam]

Weird, I have above settings but it still showing the warning with AngularCli 1.3.2. But all my material ui work correctly with my customized theme.

I wonder if anyone has the same issue.

update:

Ok, I figured out.

I put it like

.main-theme {
  @include angular-material-theme($main-theme);
}

So I can dynamic change theme. However, it is the reason causing the issue.

Apparently, angular-material doesn't like this nesting setup.

So the real question is how to dynamically change the theme properly?

[ghost]

@maxisam I missed the line to put the colors-theme.scss in the angular-cli.json. I tried to get them to update the documentation but no one cares. However you are including .main-theme, instead of using @component{style: "../main-theme.scss"} use angular-cli.json instead.

[maxisam]

@megamindbrian what is colors-theme.scss? I don't see anything about it.

[ghost]

I just meant whatever file of yours contains the .main-theme code. Use angular-cli.json to import that instead of the inline method.

…

On Aug 30, 2017 9:47 AM, "Sam Lin" ***@***.***> wrote: @megamindbrian <https://github.com/megamindbrian> what is colors-theme.scss? I don't see anything about it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6063 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AX5XbpEhujWduzXL71UU1fipnboqeNpHks5sdZI1gaJpZM4OkPAS> .

[maxisam]

@megamindbrian I think inline @import works fine.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}