J'utilise des thèmes Angular Material 2 pour mon application Angular 4. J'ai créé les thèmes suivants dans mon fichier theme.scss
@import '~@angular/material/theming';
@include mat-core();
$primary-color: mat-palette($mat-grey);
$accent-color: mat-palette($mat-blue, 500, 900, A100);
$warning-color: mat-palette($mat-red);
$dark-theme: mat-dark-theme($primary-color, $accent-color, $warning-color);
$light-theme: mat-light-theme($primary-color, $accent-color, $warning-color);Et dans mon style.scss, j'ai ce qui suit
@import 'theme.scss';
.dark-theme {
@include angular-material-theme($dark-theme);
}
.light-theme {
@include angular-material-theme($light-theme);
}Dans mon code HTML, j'ai codé en dur le thème sombre (je veux éventuellement donner à l'utilisateur la possibilité de choisir l'un des deux - sombre ou clair).
<body class="dark-theme">
<app-root></app-root>
</body>Mais lorsque je lance l'application, je ne vois pas les couleurs sombres auxquelles je m'attendais. Par exemple, si j'inspecte l'élément body, je ne vois aucun style qui lui soit associé. Ou si j'ajoute un élément h1, aucun style ne lui est attribué. Je m'attendais à ce que tous les éléments contenus dans la balise body suivent les couleurs du thème. N'est-ce pas le cas ? Dois-je mentionner explicitement les couleurs que doivent avoir mes éléments non-mat ?
Je ne pense pas que le bootstrapping était incorrect. En effet, lorsque j'utilise des composants mats comme ceux qui suivent, le thème est appliqué pour ce composant, mais l'arrière-plan général n'est toujours pas défini et est donc blanc.
<mat-drawer-container class="example-container">
<mat-drawer mode="side" opened="true">{{title}}</mat-drawer>
<mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>De même, que se passe-t-il si je veux appliquer une couleur différente de la palette que j'utilise, autre que les couleurs primaires, d'accentuation ou d'avertissement ? Comment puis-je les définir et les utiliser ?
Je suis absolument novice dans ce domaine et je commence seulement à comprendre ce que fait le code ci-dessus. Toute aide est la bienvenue.
