Comment définir les couleurs primaires et secondaires dans Composants de conception matérielle pour le Web?
Détails
Je me suis tourné vers les composants matériels (MDC) pour le Web et je suis passé à l’utilisation de CDN (bibliothèques CSS et JavaScript hébergées):
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.csshttps://unpkg.com/material-components-web@latest/dist/material-components-web.min.js
C’est en vertu de leur getting-started-docs-page in [ 1 ]. De même, MDC dispose de cette predecessor-slash-lighter-library Material Design Lite (MDL) sur laquelle vous pouvez facilement personnaliser les couleurs du thème. Cela peut être fait via son générateur de thèmes CSS personnalisé. [ 2 ]
Cependant, selon le Theming Guide de MDC Web: [ 3 ]
... Pour le moment, MDC Web prend en charge la thématisation avec Sass et avec CSS Custom Property, ainsi que des plans pour la prise en charge de CDN, une fois ce service disponible.
Il s'avère que modifier les couleurs du thème via l'URL du CDN du MDC n'est actuellement pas une option.
Revenons donc à ma question. Comment définir les couleurs primaires et secondaires du nouveau MDC pour le Web à l'aide du CDN?
Références
Si vous utilisez le code CSS de MDC Web à partir de CDN, vous pouvez modifier un thème à l'aide des propriétés personnalisées CSS (variables) comme suit:
/* my-style.css */
:root {
--mdc-theme-primary: #fcb8ab;
--mdc-theme-secondary: #feeae6;
}
La liste complète des propriétés personnalisées CSS pour le thème MDC est here . Par exemple, voici comment modifier la couleur du texte en arrière-plan principal/secondaire:
/* my-style.css */
:root {
--mdc-theme-primary: #fcb8ab;
--mdc-theme-secondary: #feeae6;
--mdc-theme-on-primary: #fff;
--mdc-theme-on-secondary: #fff;
}
Notez que cette CSS doit venir après l’importation du fichier CSS du MDC Web, par exemple:
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="my-style.css">
Le personnalisateur de thème MDL que vous avez mentionné n’a rien à voir avec MDC Web. MDL est un prédécesseur de MDC Web qui est déconseillé au profit de MDC Web.
En regardant les pages auxquelles vous avez lié, this semble indiquer que vous devez modifier la classe 'mdc-theme - primary - bg' pour modifier la couleur de fond primaire. Donc, vous pourriez probablement faire quelque chose comme ceci dans votre balise css ou <style>:
.mdc-theme--primary-bg {
background-color: red
}
Il existe également des classes répertoriées pour les options secondaires et autres:) 