1

Estoy intentando aplicar un cierto estilo a un SideNav de angular material, pero desconozco como usar las herramientas con scss, he leído documentación y menciona que hay que importar algunas clases como "@import '../../sidenav/sidenav-theme';" y aplicar un tema a este include "@include mat-sidenav-theme($theme-or-color-config);" y otras cosas como @mixim, pero desconozco como trabajar con ellos.

<mat-sidenav-container> <!--Este es el componente principal-->
   <mat-sidenav> <!--Este el de SideNav, sólo este debará tener un estilo oscuro y sus nodos-->
      <mat-nav-list> <!--Subnodos, una lista por ejemplo-->
          <a mat-list-item>
              <mat-icon matListIcon>home</mat-icon>
              <span matLine>Principal</span>
          </a>
       </mat-nav-list>
   </mat-sidenav>
</mat-sidenav-container>

Este es el estilo principal que estoy usando:

@import '~@angular/material/theming';
@include mat-core();
//Paleta de colores
$primaryDarkPalette: ( 100: #2E368F, contrast: ( 100: #FFFFFF));
$accentDarkPalette: (100: #ee2b47, contrast: ( 100: #FFFFFF));
$warnDarkPalette: (100: #da1212, contrast: ( 100: #FFFFFF));
//
//Colores customizados para ciertos componentes
//
$backgroundSideNav: (100: #343a40, contrast:(100: #FFFFFF));
//
//Asignación de colores a variables
//
$ngHealthPrimaryDark: mat-palette($primaryDarkPalette, 100);
$ngHealthAccentDark: mat-palette($accentDarkPalette, 100);
$ngHealthWarnDark: mat-palette($warnDarkPalette, 100);
//
//Asignacion de colores para ciertos componentes
//
$customBackgroundColorSideNav: mat-palette($backgroundSideNav, 100);
//
//Agregar colores al tema material
//
$ngHealthLightTheme: mat-light-theme((color:( primary: $ngHealthPrimaryDark, accent: $ngHealthAccentDark, warn: $ngHealthWarnDark)));
//
//Agregamos el thema como base
//
@include angular-material-theme($ngHealthLightTheme);

Aquí les dejo una captura: introducir la descripción de la imagen aquí

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.