Quiero utilizar los colores de la marca de mi empresa en toda la aplicación.

Encontré este problema: AngularJS 2 - Material design - set color palette donde puedo crear un tema supuestamente personalizado , pero básicamente solo usa diferentes partes de paletas preconstruidas. No quiero usar los colores predefinidos de Material2. Quiero mis colores de marca únicos y especiales. ¿Hay una mejor manera (¿más correcta?) De crear mi propio tema, que simplemente hackear con _palette.scss?

¿Necesito hacer un mixin para la paleta de mi marca? Si es así, ¿alguna guía sobre cómo hacerlo correctamente? ¿Cuáles son los significados de los diferentes tonos de colores (marcados con números como: 50, 100, 200, A100, A200 ...)?

¡Cualquier información sobre esta área será muy apreciada!

136
Narxx 3 ene. 2017 a las 13:09
 – 
anshuVersatile
3 ene. 2017 a las 13:12
¡Gracias por el aporte! Ahora entiendo la cuestión de la numeración. Muy apreciado :-)
 – 
Narxx
3 ene. 2017 a las 13:13

3 respuestas

La mejor respuesta

Después de investigar un poco, terminé con esta conclusión que me resolvió, espero que también te ayude.

Paso 1: cree sus propias paletas a partir de colores de marca.

Encontró este increíble sitio web donde ingresa el color de su marca y crea una paleta completa con los diferentes tonos de ese color de marca: http: / /mcg.mbitson.com

Usé esta herramienta para mi color primary (que es el color de mi marca) y el color accent.

Paso 2: cree paletas en su archivo de tema personalizado

Aquí hay una guía sobre cómo crear dicho archivo .scss: https: //github.com/angular/material2/blob/master/guides/theming.md

@import '~@angular/material/theming';

// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core(); 

// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
    50: #ffffff,
    100: #dde6f3,
    200: #b4c9e4,
    300: #7fa3d1,
    400: #6992c9,
    500: #5282c1,
    600: #4072b4,
    700: #38649d,
    800: #305687,
    900: #284770,
    A100: #ffffff,
    A200: #dde6f3,
    A400: #6992c9,
    A700: #38649d,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

$bv-orange: (
    50: #ffffff,
    100: #fff7f4,
    200: #fecdbd,
    300: #fc9977,
    400: #fc8259,
    500: #fb6c3b,
    600: #fa551d,
    700: #f44205,
    800: #d63a04,
    900: #b83204,
    A100: #ffffff,
    A200: #fff7f4,
    A400: #fc8259,
    A700: #f44205,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent:  mat-palette($bv-orange);

// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);

// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);

Alguna explicación sobre el código anterior

Los números del lado izquierdo establecen el "nivel" de brillo. El valor predeterminado es 500 (que es el verdadero tono del color de mi marca / color de acento). Entonces, en este ejemplo, el color de mi marca es #5282c1. El resto son otros tonos de ese color (donde los números más bajos significan tonos más brillantes y los números más altos significan tonos más oscuros). Las AXXX son diferentes tonos. No estoy seguro (todavía) de dónde están en uso. Nuevamente, un número más bajo significa más brillante y números más altos significa más oscuro.

El contrast establece el color de la fuente sobre esos colores de fondo. Es muy difícil (o incluso imposible) calcular a través de CSS dónde la fuente debe ser brillante (blanca) u oscura (negra con una opacidad de 0.87) para que sea fácilmente legible incluso para personas daltónicas. Por lo tanto, esto se establece manualmente y se codifica en la definición de la paleta. También obtiene esto del generador de paleta que vinculé anteriormente (aunque se está generando en el antiguo formato Material1, y tendrá que convertirlo manualmente al formato Material2 como publiqué aquí).

Configure el tema para usar la paleta de colores de la marca como el color primary y lo que tenga para acentuar como su color accent.

Paso 3: use el tema en toda la aplicación siempre que pueda

Algunos elementos pueden tomar los colores del tema, como <md-toolbar>, <md-input>, <md-button>, <md-select>, etc. Utilizarán primary de forma predeterminada, así que asegúrese de establecer la paleta de colores de la marca como principal. Si desea cambiar el color, use la directiva color (¿es una directiva Angular?).

Por ejemplo:

<button mat-raised-button color="accent" type="submit">Login</button>

307
Community 20 jun. 2020 a las 12:12
En mi caso, usé un generador de temas de terceros y omitió los símbolos hash en los códigos de color hexadecimales. También envolvió cada clave y valor con comillas simples, pero no estoy seguro de que eso haya sido un problema. Agregar los hash solucionó mi problema de compilación.
 – 
isherwood
30 jun. 2017 a las 17:22
1
Sí, acabo de probar esto y funcionó. Lo único que ha cambiado es la parte de las importaciones. No necesita variables y solo importa / incluye archivos de temas de material como este: @import '~@angular/material/theming'; @include mat-core();
 – 
flackjap
27 sep. 2017 a las 14:39
3
Mire este artículo, es muy bueno para explicar cómo funciona todo blog.ilsttram.io/angular/2017/05/23/…
 – 
Martin Andersen
5 oct. 2018 a las 19:51
1
Para ser honesto, hemos desaprobado nuestro proyecto Angular y lo escribimos desde cero usando VueJS, así que ni siquiera recuerdo cómo terminamos definiendo nuestra tematización en Angular :) Solo intenta agregar más variables de color y agrégalas todas al tapete -Función de tema de luz.
 – 
Narxx
19 dic. 2018 a las 20:02
1
De acuerdo con la siguiente respuesta, los valores AXXX son para botones de acción flotantes y elementos interactivos con la "A" que significa "Acento". graphicdesign.stackexchange.com/a/69470
 – 
Trevor Karjanis
6 jul. 2020 a las 17:42

Intente usar el siguiente sitio web, esto parece fácil de personalizar los temas angulares. https://materialtheme.arcsine.dev/

11
Shailesh Tiwari 18 ago. 2020 a las 17:41

Con Angular Material v12, un tema de material se ve así y debe ser importado por styles.scss

@use '~@angular/material' as mat;
@import './custom-palettes';

// Plus imports for other components in your app.

// 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. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette(mat.$gray-palette, 900, 800, 900);
$candy-app-accent: mat.define-palette(mat.$green-palette, 900, 800, 900);
$candy-app-warn: mat.define-palette($wfs-blue-palette, 800, 700, 900);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

// 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 mat.all-component-themes($candy-app-theme);

./custom-palettes tiene este aspecto:

// see http://mcg.mbitson.com

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$wfs-blue-palette: (
  50: #eaeef3,
  100: #cad6e0,
  200: #a7bacc,
  300: #849eb7,
  400: #698aa7,
  500: #4f7598,
  600: #486d90,
  700: #3f6285,
  800: #36587b,
  900: #26456a,
  A100: #add1ff,
  A200: #7ab5ff,
  A400: #4798ff,
  A700: #2e8aff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

Al igual que con la respuesta principal, http://mcg.mbitson.com se utiliza para generar los colores.

9
danday74 21 jun. 2021 a las 18:56