Materiale angolare - imposta la tavolozza dei colori

Question

Sto provando a configurare un progetto Angolare in combinazione con il design del materiale. Una parte del mio package.json assomiglia a questo:

"dependencies": { 
    "@angular2-material/button": "2.0.0-alpha.3", 
    "@angular2-material/card": "2.0.0-alpha.3", 
    "@angular2-material/checkbox": "2.0.0-alpha.3", 
    "@angular2-material/core": "2.0.0-alpha.3", 
    "@angular2-material/input": "2.0.0-alpha.3", 
    "@angular2-material/list": "2.0.0-alpha.3", 
    "@angular2-material/progress-bar": "2.0.0-alpha.3", 
    "@angular2-material/progress-circle": "2.0.0-alpha.3", 
    "@angular2-material/radio": "2.0.0-alpha.3", 
    "@angular2-material/sidenav": "2.0.0-alpha.3", 
    "@angular2-material/toolbar": "2.0.0-alpha.3", 
    "angular2": "2.0.0-beta.16", 
    "core-js": "^2.2.2", 
    "normalize.css": "^4.1.1", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "~0.6.12" 
    }, 

entro AngularJS 1 è possibile impostare la tavolozza dei colori per l'applicazione tramite il mdThemingProvider:

angular.module('myApp', ['ngMaterial']).config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('default') 
    .primaryPalette('pink') 
    .accentPalette('orange'); 
}); 

Ora voglio fare la stessa cosa per Angular, ma non so come farlo. Devo impostare la tavolozza tramite un provider (quindi quale provider può essere utilizzato e come può essere configurato?). O devo includere i file scss dai moduli di materiale angolare nel mio file core scss e impostare alcune proprietà?

Answer 1

Purtroppo, dal momento angolare 2 è ancora in alpha in questo momento, l'unico modo per cambiare la tavolozza dei colori è quello di modificare direttamente _default-theme.scss e creare un nuovo pacchetto di NPM.

Secondo un membro angolare:

@ samio80 Gli stili sono attualmente scritto con tematizzazione in mente, ma noi non hanno una strategia di distribuzione per tematizzazione ancora pronto. Come soluzione temporanea nel frattempo, è possibile estrarre direttamente il codice sorgente e personalizzare il tema modificando _default-theme.scss e creando pacchetti npm (tramite lo script stage-release.sh).

Fonte

: https://github.com/angular/material2/issues/287

Answer 2

angolare Materiale 2 è stato aggiornato per alpha 9 ora e porta il supporto per i temi. Il Theming Documentation spiega come implementare il proprio tema personalizzato nella propria applicazione.

Ecco i contenuti del file sass documentazioni. Puoi decidere di non usare i colori dei materiali forniti e usarne uno tuo.

@import '~@angular/material/core/theming/all-theme'; 
// Plus imports for other components in your app. 

// Include the base styles for Angular Material core. We include this here so that you only 
// have to load a single css file for Angular Material in your app. 
@include md-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: md-palette($md-indigo); 
$accent: md-palette($md-pink, A200, A100, A400); 

// The warn palette is optional (defaults to red). 
$warn: md-palette($md-red); 

// Create the theme object (a Sass map containing all of the palettes). 
$theme: md-light-theme($primary, $accent, $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 angular-material-theme($theme); 

Va notato che mentre il sostegno tematizzazione è availible, non è finalizzato e la documentazione afferma che essi hanno intenzione di rendere questo ancora più facile col passare del tempo. Tuttavia lo stato attuale funziona abbastanza bene.

Answer 3

Per quanto riguarda l'utilizzo di combinazioni di colori di materiali predefiniti, è sempre possibile seguire la guida ai temi available here.

Se si vuole definire il proprio schema di colore aziendale, basta definire una tavolozza personalizzata in anticipo e passare che alla funzione mat-palette():

...  
$mat-custom: (
      50: #e0f2f1, 
      100: #b2dfdb, 
      200: #80cbc4, 
      300: #4db6ac, 
      400: #26a69a, 
      500: #009688, 
      600: #00897b, 
      700: #00796b, 
      800: #00695c, 
      900: #004d40, 
      A100: #a7ffeb, 
      A200: #64ffda, 
      A400: #1de9b6, 
      A700: #00bfa5, 
      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-87-opacity, 
        900: $white-87-opacity, 
        A100: $black-87-opacity, 
        A200: $black-87-opacity, 
        A400: $black-87-opacity, 
        A700: $black-87-opacity, 
      ) 
    ); 

    // 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. 
    $candy-app-primary: mat-palette($mat-custom); 
    ... 

Deafult sfumature di colore utilizzati dalla palette sono 500 (di default), 100 (più leggero) e 700 (più scuro). Il modo più semplice per creare una combinazione di colori personalizzata è copiare una tavolozza su from the standard palettes e adattarla a proprio piacimento.