page examples example card bootstrap angular angular-material2

examples - ¿Angular Material2 temática-cómo establecer el fondo de la aplicación?



mat-card-avatar (8)

Le sugiero que declare un color de fondo en un archivo de variables (suponiendo que esté usando Sass) y luego simplemente lo importe donde sea necesario. Por ejemplo:-

@import ''../config/variables''; body { height: 100%; margin: 0; background-color: $brand-primary; }

Estoy construyendo una aplicación angular2 usando material angular2. Estoy tratando de establecer el fondo de mi aplicación "de la manera correcta", pero no puedo entender cómo.

Encontré una clase que puedo usar en mi elemento <body> : mat-app-background que puedo agregar, que me da un color predeterminado (dependiendo de si estoy usando los temas claros u oscuros).

Deseo definir este color de fondo para usar el color de mis marcas, pero no puedo averiguar cómo hacerlo.

En _theming.scss se define así:

// Mixin that renders all of the core styles that depend on the theme. @mixin mat-core-theme($theme) { @include mat-ripple-theme($theme); @include mat-option-theme($theme); @include mat-pseudo-checkbox-theme($theme); // Wrapper element that provides the theme background when the // user''s content isn''t inside of a `md-sidenav-container`. .mat-app-background { $background: map-get($theme, background); background-color: mat-color($background, background); } ... }

Así que pensé que tendría sentido intentar agregar el color de fondo a mi tema personalizado, de alguna manera, pero no podía entender cómo hacerlo.

En la documentación de theming Material2 solo dice:

"En Material angular, un tema se crea al componer múltiples paletas. En particular, un tema consiste en:

  • Una paleta principal: los colores más utilizados en todas las pantallas y componentes.
  • Una paleta de acento: colores utilizados para el botón de acción flotante y elementos interactivos.
  • Una paleta de advertencia: colores utilizados para transmitir el estado de error.
  • Una paleta de primer plano: colores para texto e iconos.
  • Una paleta de fondo: colores utilizados para fondos de elementos. "

¿Cómo puedo agregar mi fondo al tema, o hacerlo de otra manera?

No es exactamente la respuesta a tu pregunta, pero creo que mucha gente terminará aquí buscando "cómo configurar el color de fondo de la aplicación".

En su project/index.html configure su clase de cuerpo en mat-app-background

<body class="mat-app-background"> <app-root></app-root> </body>

Y asegúrate de que en tu project/angular.json tengas:

"styles": [ "./node_modules/@angular/material/prebuilt-themes/YOUR_STYLE.css", ... ],

No hay forma de hacerlo "correctamente", solo soluciones y trucos. Su tema puede definir paletas primarias, secundarias y de advertencia, pero no paletas de fondo y primer plano. La razón probable por la que no hay una forma directa / fácil de hacer esto en Material Angular es que, de acuerdo con Material Design, no debería hacerlo. El color debe usarse de manera específica para resaltar y diseñar varios elementos de acuerdo con su tema, pero los colores de fondo y de primer plano para el contenido simple deben ser oscuros o grises claros, no de color. Si realmente necesita hacer esto, las otras sugerencias sobre la redefinición del tema de fondo o el uso de su propia clase deberían ser suficientes.

Si desea cambiar el color de fondo del tema para toda la aplicación de una manera limpia, puede anular su tema con lo siguiente.

// Set custom background color $custom-background-color: map_get($mat-blue-grey, 50); // -or- Can set colour by hex value too $custom-background-color: #628cc9; $background: map-get($theme, background); $background: map_merge($background, (background: $custom-background-color)); $theme: map_merge($theme, (background: $background));

Esto supone que ya ha configurado su $theme usando mat-light-theme o mat-dark-theme . Por supuesto, puede sustituir $mat-blue-grey por un mapa de color de su elección.

Aquí hay un ejemplo completo de cómo estoy usando esto. Tengo lo siguiente en un archivo llamado theme.scss , que se incluye en mi angular.json "estilos" de angular.json :

// Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core; // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. $primary: mat-palette($mat-red, 600, 400, 900); $accent: mat-palette($mat-blue-grey, 500, 200, 700); $background-color: map_get($mat-blue-grey, 50); // The warn palette is optional (defaults to red). $warn: mat-palette($mat-blue); // Create the theme object (a Sass map containing all of the palettes). $theme: mat-light-theme($primary, $accent, $warn); // Insert custom background color $background: map-get($theme, background); $background: map_merge($background, (background: $background-color)); $theme: map_merge($theme, (background: $background)); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($theme); @include my-app-theme($theme);

También hay una mezcla de colores como este:

.your-class-here { background: mat-color($mat-grey, 700, 0.9); }

Al mirar los componentes de material angular, puede asignar un color como este.

<md-toolbar color="primary"> </md-toolbar>

Eso hará que tu barra de herramientas sea del color de tu color primario.

También asegúrese de mirar el archivo _theming.scss en material angular.

así que puedes usar esos mixins para extraer un color de tu paleta.

para obtener una solución adicional si la versión anterior no funcionó, el material angular 2 trabaja con el estilo de encapsulación, por lo tanto , haga lo que haga, no puede personalizar el componente angular del material desde el exterior, por lo que siempre he utilizado una solución ideal para eso.

1- Puedes usar este truco que te dará la posibilidad de personalizar el componente de material angular si quieres configurar ViewEncapsulation.None

//test.component.ts import { ViewEncapsulation } from ''@angular/core''; @Component({ selector: ''app-test'', templateUrl: ''.....'', styleUrls: [''....''], encapsulation: ViewEncapsulation.None })

o

2- Si solo quieres cambiar el fondo puedes simplemente intentar esto

//style.css (main style file) html, body { background-color: #fafafa; }

Esto va a cambiar todo el color de fondo de toda tu aplicación.

ver: tema de paleta scss en github Angular (2) Material (2)

Extracto del código:

// Background palette for light themes. $mat-light-theme-background: ( status-bar: map_get($mat-grey, 300), app-bar: map_get($mat-grey, 100), background: map_get($mat-grey, 50), hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX card: white, dialog: white, disabled-button: $black-12-opacity, raised-button: white, focused-button: $black-6-opacity, selected-button: map_get($mat-grey, 300), selected-disabled-button: map_get($mat-grey, 400), disabled-button-toggle: map_get($mat-grey, 200), ); // Background palette for dark themes. $mat-dark-theme-background: ( status-bar: black, app-bar: map_get($mat-grey, 900), background: #303030, hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX card: map_get($mat-grey, 800), dialog: map_get($mat-grey, 800), disabled-button: $white-12-opacity, raised-button: map-get($mat-grey, 800), focused-button: $white-6-opacity, selected-button: map_get($mat-grey, 900), selected-disabled-button: map_get($mat-grey, 800), disabled-button-toggle: map_get($mat-grey, 1000), ); // Foreground palette for light themes. $mat-light-theme-foreground: ( base: black, divider: $black-12-opacity, dividers: $black-12-opacity, disabled: rgba(black, 0.38), disabled-button: rgba(black, 0.38), disabled-text: rgba(black, 0.38), hint-text: rgba(black, 0.38), secondary-text: rgba(black, 0.54), icon: rgba(black, 0.54), icons: rgba(black, 0.54), text: rgba(black, 0.87), slider-off: rgba(black, 0.26), slider-off-active: rgba(black, 0.38), ); // Foreground palette for dark themes. $mat-dark-theme-foreground: ( base: white, divider: $white-12-opacity, dividers: $white-12-opacity, disabled: rgba(white, 0.3), disabled-button: rgba(white, 0.3), disabled-text: rgba(white, 0.3), hint-text: rgba(white, 0.3), secondary-text: rgba(white, 0.7), icon: white, icons: white, text: white, slider-off: rgba(white, 0.3), slider-off-active: rgba(white, 0.3), );