is it possible to define a custom theme angular material using less?
Asked Answered
A

0

7

i have started applying a custom theme for my angular project,but i am confused a bit whether it's possible to define the theme as less file. the hierarchy of my new theme is like this:

**

  1. -custom-theme.scss

  2. -custom-components-themes.scss

** the desired is **

  1. -custom-theme.less
  2. -custom-components-themes.less

**

-- custom-components-themes.scss eaxmple:

    // you only have to add additional componenets here (instead of in every theme class)
@mixin custom-components-theme($theme) {
    // Extract whichever individual palettes you need from the theme.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $background-color: map_get($primary, A1000);

    // Use mat-color to extract individual colors from a palette as necessary.
    .mat-sidenav {
        Background: linear-gradient( mat-color($primary, A900), mat-color($primary, A1000)) ;    }
    .mat-sidenav .mat-toolbar {
        background-image: linear-gradient(mat-color($primary, A50), mat-color($primary, A800)) !important;
        color: mat-color($primary, 50) ;
        font-family: "Segoe UI";
        font-size: 23px ;
    }

thank you in advance

Aleurone answered 5/4, 2020 at 9:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.