While using (ng generate @angular/material:my--own-theme), I came across some code in own-theme.scss. Surprisingly, this code works for the palette included in Angular Material, but I prefer to use my own theme. Here's what was generated and what I did:
@use 'sass:map';
@use '@angular/material' as mat;
// Color palettes are generated from primary: #2397e6, secondary: #00639a, tertiary: #006c51, neutral: #9dcaff
$_palettes: (
// color values here...
);
$_rest: (
// mapping values here...
);
$_rest2: (
// more mapping here...
);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest2);
$_primary: mat.$orange-palette;
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary
),
));
and in HTML
<div class="demo-buttons custom-theme">
<h2>Custom Theme</h2>
<button mat-raised-button color="primary">Raised</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="tertiary">Tertiary</button>
<button mat-raised-button color="warn">Warn</button>
</div>
https://i.sstatic.net/XIZMpsHc.png
The main issues I encountered were:
- Primary and tertiary colors appear to be the same (possibly not from my own theme) - how can I change this?
- How can I modify the background of these buttons?
- Is there a way to adjust the 'accent' color?
Appreciate any help or insights on this matter.