CODEWITHSUNDEEP
angular-materialangular6
Arne Wolframm
Arne Wolframm

Reputation: 366

Access primary color of prebuilt schemes

I set up a new project using

ng new app

ng add @angular/material

I included the following line in styles.css:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

I want to apply the primary color of the deeppurple-amber theme to a <p> element.

How can I extract the primary color of a prebuilt scheme and apply it to my own component in Angular 6??

Upvotes: 1

Views: 2174

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

Instead of importing the pre-built theme, include the content of the pre-built theme instead.

@import '~@angular/material/theming';

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

// Define a theme.
$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);

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

// Include all theme styles for the components.
@include angular-material-theme($theme);

You can then access the palettes and colors and theme your own components.

Upvotes: 2

Related Questions