44 questions
0
votes
0
answers
81
views
Angular Material 3 theming system
Setting up theming for an application using the Sass APIs introduced in Angular Material v19 is different from prior versions. In Angular Material's v2 theming system, I defined my color palette, my ...
- 739
2
votes
1
answer
345
views
Why does the navbar not take the theme I am trying to assign
I have a app at https://stackblitz.com/edit/etnmae-xjweyt and cannot seem to get it to compile much less assign a neutral color to the navbar.
I can change it from light to dark mode, but want ...
- 125
1
vote
1
answer
311
views
Modify color of a mat-form-field
I can't find a way to change the color given by the Azure and Blue theme for the Material component.
Especially for the mat-form-field (matInput).
HTML
<mat-form-field appearance="fill"&...
- 13
1
vote
1
answer
111
views
What is the best practice for having mutiple themes in a single web app? Override or 2nd theme
I have an app that was created for me at
https://stackblitz.com/edit/angular-gjkbqm-schlk9?file=index.html
This app shows how to properly use a theme, the explanation was given here
How do I use a ...
- 125
1
vote
1
answer
204
views
How do I use a font other than Roboto?
I am just starting on angular 3 and have the bugs worked out. However, I am having an issue trying to get different fonts and typography to work properly
<!doctype html>
<html lang="en&...
- 125
1
vote
1
answer
43
views
Unable to Extend Angular Material MatDivider in Custom Wrapper Component
I'm creating a custom wrapper component in Angular to extend Angular Material’s MatDivider, but I’m running into issues where the component styles and properties from MatDivider are not applied ...
- 1,089
2
votes
4
answers
1k
views
Remove checkmark from Angular Material Chip, but keep avatar image
When upgrading my Angular application from version 14 to 18, a lot has changed. I'm using Angular Material for some of the components, and the Chips aren't working as before.
With the new mat-chip-...
- 647
1
vote
1
answer
347
views
How do you change the global shadow colour in Angular Material
Edit: I have created a StackBlitz with a custom theme here:
https://stackblitz.com/edit/material-shadow-demo
I would like to change the shadows across an entire Angular material theme. Please note ...
- 8,020
2
votes
1
answer
2k
views
How to get mat-primary color in angular material-18
I have upgraded my Angular-16 project to angular-18. its working fine. Angular material-18 also upgraded.
Now I want to assign primary color to some elements, syntax is something like this:
@use '@...
- 7,004
15
votes
1
answer
4k
views
How to generate a palette in Angular Material 3 with a specific primary color
I need to generate a palette in Angular Material 3 to implement a theme with a specific primary color. The buttons and some other controls should be this specific color. E.g. #C9007E. I'm following ...
- 1,226
14
votes
3
answers
3k
views
Angular Material 18 typescale levels
I upgraded to Angular 18 (and adjusted the theming styles to the Material 3 SCSS API), but I can't figure out how to define typography scale levels (font sizes) with the new API. It used to be done ...
- 475
2
votes
1
answer
787
views
How can I use an Angular Material chckbox without additional spacing?
I'm currently working with Angular Material and would like to know if there is a way to use the checkbox without the default spacing. I noticed that Angular Material's checkbox are surrounded by some ...
- 705
6
votes
4
answers
7k
views
How to use custom color palette in @angular/material-experimental - Expected $config.color.primary to be a valid M3 palette
X [ERROR] Expected $config.color.primary to be a valid M3 palette.
angular 17
I can't find the expected valid M3 palette for @angular/material-experimental anywhere.
tryied this in styles.scss:
@use &...
- 63
1
vote
2
answers
2k
views
custom styling for Material Tooltip on Angular 17
I have an angular 17 app with latest Material components.
I am using the Tooltip component extensively and having problems finding how to customize it.
I did manage to change the font size using the ...
- 2,573
2
votes
1
answer
7k
views
After upgrade from Angular 14 to 15 my UI is not shown properly
I'm trying to upgrade this Angular 14 app (that I just inherited) to Angular 15 using the official guide. The goal is to continue using the angualr 14 styles if I could. I'll worry about 16 and 17 ...
- 2,258