Obtenir le schéma de couleurs/la palette de thèmes 2 pour d'autres éléments

Question

Je construis une application mais je veux garder un schéma de couleurs cohérent qui peut être changé avec des paramètres donc en utilisant Material (2) avec angulaire (2+), mais je Je ne suis pas sûr comment obtenir le schéma de couleurs sur les éléments qui ne permettent pas directement de les colorier avec color="primary" alors je suis parti avec essayer de comprendre comment obtenir la combinaison de couleurs/couleurs que mon thème Material 2 utilise. Et je veux que ça change quand les changements de thème, par exemple ma barre de navigation s'adapter au changement de thème parce que son ensemble à

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10"> 

Mais un élément de grille de matériau 2 ne prend pas le même argument si Im gauche pour tenter de style dans une couleur assez proche ou tout simplement ne pas correspondre du tout (et ajuster l'habitude de changements de thème) comme on le voit ici:

Je veux qu'il corresponde à la couleur avec le tapis de thème, est ici (et est changé sur les options sélectionnées dans les paramètres de la barre de navigation)

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

@include mat-core(); 



$candy-app-primary: mat-palette($mat-red); 
$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400); 
$candy-app-warn: mat-palette($mat-red); 
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $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. 
.default { 
    @include angular-material-theme($candy-app-theme); 
} 
.light { 
    $light-primary: mat-palette($mat-blue, 200,300, 900); 
    $light-accent: mat-palette($mat-light-blue, 600, 100, 800); 
    $light-warn: mat-palette($mat-red, 600); 
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); 
    @include angular-material-theme($light-theme); 
} 
@include angular-material-theme($candy-app-theme); 

Answer 1

J'ai trouvé une solution de contournement géniale !!!! Je suis tellement excitée de montrer cela parce qu'elle m'avait dérouté comment mettre en œuvre ceci pour les agers. Alors voilà; Tout d'abord, changez tous vos fichiers CSS en scss;

Pour les projets existants

• Run dans la console ng set defaults.styleExt=scss

• Renommer tous les fichiers existants .css à .scss

• modifier manuellement le fichier extention styles dans .angular-cli.json de Css à .scss
• Si vous utilisez un outil na pas comme WebStorm Refactor pour renommer puis modifier manuellement tous les styleUrls de .css à .scss

Pour les projets futurs

• Juste pour votre nouveau projet utilise simplement ng new your-project-name --style=scss

• Pour tous les nouveaux projets à utiliser SCSS utilisation ng set defaults.styleExt=scss --global

Maintenant, vous aurez besoin d'avoir un fichier theme.scss dans la racine de votre application comme ceci:

Maintenant, dans votre style.SCSS le fichier que vous voulez ajouter ce qui suit (comme vous pouvez le voir, je referrence background-color, mais vous pouvez le modifier à tout élément au thème de votre site mais vous voulez):

EDIT: Vous ne avez pas besoin de mettre cette coutume @mixin élément dans votre styles.scss vous pouvez le mettre dans l'un de vos *name*.component.scss puis simplement importer et l'inclure de la même manière que vous faites avec l'exemple donné!

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

// Define a custom mixin that takes in the current theme 
@mixin theme-color-grabber($theme) { 
    // Parse the theme and create variables for each color in the pallete 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 
    $warn: map-get($theme, warn); 
    // Create theme specfic styles 
    .primaryColorBG { 
    background-color: mat-color($primary); 
    } 
    .accentColorBG { 
    background-color: mat-color($accent); 
    } 
    .warnColorBG { 
    background-color: mat-color($warn); 
    } 
} 

Allez maintenant à votre fichier theme.scss que vous utilisez pour votre matériel thème 2 articles, si vous avez besoin d'aide thématisation Check this out: Material 2 Github - Theming guide

Ouvrez maintenant votre theme.scss et importez votre style. scss, puisque mon theme.scss est dans la racine du dossier /src/app/theme.scss Je dois d'abord en sortir pour référencer mon fichier de style global /src/styles.scss comme ça;

@import '../styles'; 

Ensuite, nous devons effectivement inclure notre nouvelle coutume @mixin nous avons créé dans TOUS nos thèmes (si vous avez plusieurs comme je le fais, il change de couleur en fonction du thème choisi en cours).

Inclure au-dessus de la thème de matériau angulaire réels comprennent, comme ceci:

@include theme-color-grabber($theme); 
@include angular-material-theme($theme); 

Si vous avez des thèmes comme moi l'ajouter dans la même position comme ceci:

.light { 
    $light-primary: mat-palette($mat-blue, 200,300, 900); 
    $light-accent: mat-palette($mat-light-blue, 600, 100, 800); 
    $light-warn: mat-palette($mat-red, 600); 
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); 
    @include theme-color-grabber($light-theme); 
    @include angular-material-theme($light-theme); 

} 

Vous pouvez voir que j'ai ajouté mon theme-color-grabber au dessus de l'include, ce n'est pas vraiment important si c'est au dessus ou en dessous du thème actuel car c'est en obtenant les couleurs des thèmes qui est le point principal .

Mon tout themes.scss ressemble à ceci:

@import '~@angular/material/theming'; 
//We import our custom scss component here 
@import '../styles'; 

@include mat-core(); 

$theme-primary: mat-palette($mat-red); 
$theme-accent: mat-palette($mat-deep-orange, A200, A100, A400); 
$theme-warn: mat-palette($mat-red); 
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn); 
// 
@include theme-color-grabber($theme); 
@include angular-material-theme($theme); 
.light { 
    $light-primary: mat-palette($mat-blue, 200,300, 900); 
    $light-accent: mat-palette($mat-light-blue, 600, 100, 800); 
    $light-warn: mat-palette($mat-red, 600); 
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); 
    @include theme-color-grabber($light-theme); 
    @include angular-material-theme($light-theme); 

} 

Et enfin, nous pouvons maintenant faire appel à nos thèmes de couleur pour un fond PARTOUT !, par exemple, je donne un mat-grid-tile la couleur « primaire » (il doesn « t prendre la couleur = » » argument, comme d'autres éléments tels que le tapis barre d'outils) en mettant simplement sa classe au nom de la classe appropriée comme ceci:

<mat-grid-list cols="4" rows="4" rowHeight="100px"> 
    <mat-grid-tile 
    colspan="4" 
    rowspan="5" 
    class="primaryColorBG"> 
    <div fxLayout="column" fxLayoutAlign="center center"> 
     <h1 class="title-font">Callum</h1> 
     <h1 class="title-font">Tech</h1> 
    </div> 
    <p> 
     Ambitious and ready to take on the world of Information Technology,<br> 
     my love for programming and all things I.T. has not wavered since I first got access<br> 
     to my fathers computer at age 9. 
    </p> 
    </mat-grid-tile> 

</mat-grid-list> 

Enfin, notre résultat ressemblera à ceci !:

thème rouge actif

thème bleu actif