Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to modify the angular material theme main color

I have created a new angular5 project on which I'm using angular material for frontend components (https://material.angular.io/). All good till now but the main problem is how to add a custom theme. I am not using a scss compiler on this project so what I am doing is to import all css components into style.css like

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~app/components/test/test.component.css";

The thing is I don't know how to modify the base color of prebuilt theme or to generate another css with other base color for my theme. If anyone can help me with that I'll really appreciate !

like image 898
mcmwhfy Avatar asked Dec 22 '17 17:12

mcmwhfy


People also ask

Can I change angular material theme?

it's very easy to create a custom angular material theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components. Your custom theme will be a Sass file and in our case, we'll call it theme. scss and place it in our app's /src folder.

Can we customize angular material?

Angular Material supports customizing component styles via Sass API as described in the theming guide. This document provides guidance on defining custom CSS rules that directly style Angular Material components.

How do I use angular color materials?

To read color values from a theme, you can use the get-color-config Sass function. This function returns a Sass map containing the theme's primary, accent, and warn palettes, as well as a flag indicating whether dark mode is set. @use 'sass:map'; @use '@angular/material' as mat; $color-config: mat.

How do I change the mat toolbar color in angular materials?

The color of a <mat-toolbar> can be changed by using the color property. By default, toolbars use a neutral background color based on the current theme (light or dark). This can be changed to 'primary' , 'accent' , or 'warn' .


1 Answers

Here's a very descriptive guide on how to define your own theme (but you should definitely check out the link that @br.julien posted above.):

NOTE: If you're in a rush, just scroll down to the bottom of this answer to get the whole source code.

Prerequsites

  • If you're using a CSS file, please change the filename extension to .scss.
  • If you're using the Angular CLI, in your styles array, change styles.css to styles.scss:

    "styles": [
        "styles.scss" // <- Change to this
    ]
    

Get started

  1. Import ~@angular/material/theming at the top of your styles.scss:

    @import '~@angular/material/theming';
    
  2. After that, add @include mat-core() in styles.scss, ideally after the import line:

    @include mat-core();
    
  3. Afterwards, define some variables for your app (primary, accent and optionally warn), then assign them to a function called mat-palette:

    // I suggest that you should use another prefix, but `my-app` is fine as well
    // Primary colour
    $my-app-primary: mat-palette($mat-indigo);
    // Accent colour
    $my-app-accent: mat-palette($mat-pink, A200, A100, A400);
    

    For all palettes, visit the source code (_palette.scss).

    Also, see what the colour palettes look like on Material.io guidelines.

  4. Next, define another variable for your app's theme and include the theme as a parameter of angular-material-theme (place this after the variables you defined above):

    (Note: Choose any one of these options below:)

    Light theme:

    $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
    @include angular-material-theme($my-app-theme);
    

    Dark theme:

    $my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent);
    @include angular-material-theme($my-app-theme);
    
  5. You're done!

Full source code

Here's some full source code for you to copy :)

styles.scss

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent: mat-palette($mat-pink, A200, A100, A400);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

@include angular-material-theme($my-app-theme);

(Wow. All this work for just 8 lines of code.)

Anyways, if you want to learn more about Sass, check out the official documentation!

like image 179
Edric Avatar answered Sep 30 '22 18:09

Edric