Questions tagged [angular-material-theming]

30 questions
1
vote
2 answers

Font Awesome Library not working with Angular Material library in Angular Project

I was trying to use font awesome css in my project but the css doesn't get applied to HTML elements. If i remove Angular Material theme then only the Font Awesome CSS is working. But then Angular Material Components will not work!!! @import…
Arpan Sharma
  • 395
  • 1
  • 10
  • 20
1
vote
1 answer

Angular component's style view encapsulation does not work when component scss file is imported to styles scss file

Imagine there is a SCSS mixin inside Angular component's my.component.scss file. Now I am importing that file in Angular app's global style.scss because I would like to pass some data to that mixin. For example: my-component.scss.
 @mixin…
0
votes
0 answers

Set disabled-text in Angular Material v15

I'm upgrading my Angular app to v15. Previously (in v14), to have a custom color for disabled text, I set a disabled-text property in my custom Material theme by doing this: $my-theme: mat-light-theme($theme-primary, $theme-accent,…
0
votes
1 answer

Density in Angular Material Design for single buttons only

How can I apply the density for only one button? Defining the density in the style in my less file doesn't work: .smallDiagramButton { @include mat.button-density(-3); } And using it later in the html:
0
votes
0 answers

Angular Material Theming - Treshold for black/white decision

Is there a way to set the treshold in Angular Material's theming, when white and when black text is used e.g. in buttons but also in other controls? In my case, there is black text automatically used, where white text would be better:
Konrad
  • 4,329
  • 10
  • 54
  • 88
0
votes
1 answer

Mat palette - create on the fly

The user needs to select a 3 colours from a colour picker (primary, warn, and accent). Then in the second system I need to set those as the Angular Material theming. As I am fetching those colours from the database and receiving from an observable,…
0
votes
0 answers

How to convert angular pre-built theme from dark to light theme and vice versa

As you know, the angular material comes with some pre-defined themes such as: indigo-pink.css Light pink-bluegrey.css: Dark theme Now, I want to convert but now sure how. Any guidance is appreciated. indigo-pink.css Light to Dark…
AustinTX
  • 1,322
  • 4
  • 21
  • 28
0
votes
0 answers

Angular material table theming

I made a dark theme for my angular app but there is one problem. Everything changes color as expected but the material table headers color stays the same. What am I missing in the styling that it's not changing? how can I change the color of the…
Kerk
  • 283
  • 1
  • 4
  • 24
0
votes
1 answer

CLOSED - Angular Material Typography doesn't work properly

I am trying to create my custom theme for Angular Material but when I apply the typography some elements change its own fonts but not in all the application. For example, for links doesn't works and for grid lists elements neither(I didn't notice if…
0
votes
0 answers

Is there a way to use background colors instead of primary for some components using material dark theme?

I'm using Angular Material theming for my project. I have created a custom theme, with a primary, accent and warn color. Everything is working fine, and I'm switching to material-dark-theme with a class on the root of the project. As I am looking at…
0
votes
1 answer

Angular material : How to use all colors of theme

I am using angular material in angular 7. I had used angular-material in angular-1 before & it provided a way (md-colors) to user all colors. But in for angular-material-7 i am unable to find these kind of property. When we use color in component…
0
votes
1 answer

angular material typography - customisation

In customizing my angular material theme's typography. I understand that one can override the default font with their own font like so: $custom-typography: mat-typography-config( $font-family: 'Lato, monospace' ); Although, I noticed that the…
Joey Gough
  • 2,753
  • 2
  • 21
  • 42
0
votes
2 answers

Angular Material Theme Customization

I'm trying to modify the theme of a project that has Angular 6 and it's using Angular Material 6.3.3 Currently, I just copied the code from the Material site and followed the steps but an error is popping out when I try to run ng serve. **ERROR** in…
0
votes
1 answer

How apply custom Angular Material Theme without SCSS?

I'm working in a corporate environment which is making it extremely difficult to try and get SCSS working on our build server. Is there a way to apply custom Angular Material 2 theme using custom color palettes as plain CSS instead?
adam0101
  • 29,096
  • 21
  • 96
  • 174
-1
votes
1 answer

Theming my own components by handling two themes ? Angular Material

I'm trying to theming my own components by handling two themes. So I wrote the following code. Here is theme.scss @import '~@angular/material/theming'; @include mat-core(); $theme-primary: mat-palette($mat-blue); …
1
2