near_me
Démarrage
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Composants
keyboard_arrow_downlocal_mall
Ressources
keyboard_arrow_downmdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.
Couleur et thème
mdui intègre 19 jeux de couleurs principales et 16 jeux de couleurs d’accent de Material Design. Toutes les couleurs (y compris la couleur du texte et l’opacité du texte sur les arrière-plans) sont cohérentes avec la documentation officielle de Material Design.
Lecture associée
Couleurs principales et accentuées
Dans Material Design, les couleurs sont divisées en couleurs principales (Primary) et couleurs d’accent (Accent), chacune ayant plusieurs nuances.
Dans les noms de classes CSS de la documentation suivante, [color] représente le nom de la couleur et [degree] représente la saturation.
Couleur principale
Il existe 19 couleurs principales, notamment :
Chaque couleur principale possède 10 nuances :
50
100
200
300
400
500
600
700
800
900
Couleur d’accent
Il existe 16 couleurs d’accent, notamment :
Chaque couleur d’accent possède 4 nuances :
a100
a200
a400
a700
Couleur d’arrière-plan
Le nom de la classe de couleur d’arrière-plan est .mdui-color-[color]-[degree]. Elle définit la couleur d’arrière-plan tout en réglant la couleur du texte et l’opacité du texte pour cet arrière-plan.
En outre, les couleurs principales et d’accent possèdent chacune une classe de couleur d’arrière-plan par défaut :
.mdui-color-[color]est équivalent à.mdui-color-[color]-500..mdui-color-[color]-accentest équivalent à.mdui-color-[color]-a200.
Exemple
<div class="mdui-color-blue-200">mdui-color-blue-200</div>
<div class="mdui-color-blue">mdui-color-blue</div>
<div class="mdui-color-pink-accent">mdui-color-pink-accent</div>
<div class="mdui-color-pink-a200">mdui-color-pink-a200</div>Tous les noms de classes de couleur d’arrière-plan disponibles sont listés dans le tableau de référence des couleurs ci-dessous.
Couleur du texte
Le nom de la classe de couleur du texte est .mdui-text-color-[color]-[degree].
En outre, les couleurs principales et d’accent possèdent chacune une classe de couleur de texte par défaut :
.mdui-text-color-[color]est équivalent à.mdui-text-color-[color]-500..mdui-text-color-[color]-accentest équivalent à.mdui-text-color-[color]-a200.
Exemple
<div class="mdui-text-color-blue-900">mdui-text-color-blue-900</div>
<div class="mdui-text-color-blue">mdui-text-color-blue</div>
<div class="mdui-text-color-blue-a200">mdui-text-color-blue-a200</div>
<div class="mdui-text-color-blue-accent">mdui-text-color-blue-accent</div>De plus, mdui fournit des couleurs de texte et d’icône noires et blanches avec opacité.
.mdui-text-color-black-*est utilisé pour les arrière-plans clairs..mdui-text-color-white-*est utilisé pour les arrière-plans sombres.
Exemple
Thème et couleurs
mdui propose une fonctionnalité de thème, et il suffit d’ajouter quelques classes à l’élément body pour changer le thème, y compris la couleur principale, la couleur d’accent et la couleur d’arrière-plan.
La plupart des composants mdui ont des couleurs par défaut. Une fois la couleur du thème définie, ces composants utiliseront également cette couleur pour remplacer la couleur par défaut.
Couleur principale
Ajoutez la classe .mdui-theme-primary-[color] à l’élément body pour définir la couleur principale.
Utilisez les classes suivantes sur la page ; ces couleurs changeront en fonction de la couleur du thème définie sur l’élément body :
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]
Couleur d’accent
Ajoutez la classe .mdui-theme-accent-[color] à l’élément body pour définir la couleur d’accent.
Utilisez les classes suivantes sur la page ; ces couleurs changeront en fonction de la couleur du thème définie sur l’élément body :
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]
Thème sombre
Ajoutez la classe .mdui-theme-layout-dark à l’élément body pour passer en Mode sombre.
Ajoutez la classe .mdui-theme-layout-auto à l’élément body pour que la couleur d’arrière-plan s’ajuste automatiquement au Mode sombre ou clair du système.
En outre, utilisez les classes suivantes sur la page : elles changeront selon la couleur du thème et apparaîtront sombres dans les thèmes clairs, et claires dans les thèmes sombres.
.mdui-text-color-theme-text.mdui-text-color-theme-secondary.mdui-text-color-theme-disabled.mdui-text-color-theme-divider.mdui-text-color-theme-icon.mdui-text-color-theme-icon-disabled
Vous pouvez cliquer sur l’icône color_lens dans le coin supérieur droit de la page pour définir la couleur du thème ; les couleurs principales, d’accent et du thème du tableau ci-dessous changeront en conséquence.
- Primary (Couleur principale)mdui-color-theme
- mdui-color-theme-50
- mdui-color-theme-100
- mdui-color-theme-200
- mdui-color-theme-300
- mdui-color-theme-400
- mdui-color-theme-500
- mdui-color-theme-600
- mdui-color-theme-700
- mdui-color-theme-800
- mdui-color-theme-900
- Accent (Couleur d’accent)mdui-color-theme-accent
- mdui-color-theme-a100
- mdui-color-theme-a200
- mdui-color-theme-a400
- mdui-color-theme-a700
- mdui-text-color-theme-text87%100%
- mdui-text-color-theme-secondary54%70%
- mdui-text-color-theme-disabled38%50%
- mdui-text-color-theme-divider12%12%
Tableau de référence des couleurs
- red (Couleur principale)mdui-color-red#F44336
- mdui-color-red-50#FFEBEE
- mdui-color-red-100#FFCDD2
- mdui-color-red-200#EF9A9A
- mdui-color-red-300#E57373
- mdui-color-red-400#EF5350
- mdui-color-red-500#F44336
- mdui-color-red-600#E53935
- mdui-color-red-700#D32F2F
- mdui-color-red-800#C62828
- mdui-color-red-900#B71C1C
- red (Couleur d’accent)mdui-color-red-accent#FF5252
- mdui-color-red-a100#FF8A80
- mdui-color-red-a200#FF5252
- mdui-color-red-a400#FF1744
- mdui-color-red-a700#D50000
- pink (Couleur principale)mdui-color-pink#E91E63
- mdui-color-pink-50#FCE4EC
- mdui-color-pink-100#F8BBD0
- mdui-color-pink-200#F48FB1
- mdui-color-pink-300#F06292
- mdui-color-pink-400#EC407A
- mdui-color-pink-500#E91E63
- mdui-color-pink-600#D81B60
- mdui-color-pink-700#C2185B
- mdui-color-pink-800#AD1457
- mdui-color-pink-900#880E4F
- pink (Couleur d’accent)mdui-color-pink-accent#FF4081
- mdui-color-pink-a100#FF80AB
- mdui-color-pink-a200#FF4081
- mdui-color-pink-a400#F50057
- mdui-color-pink-a700#C51162
- purple (Couleur principale)mdui-color-purple#9C27B0
- mdui-color-purple-50#F3E5F5
- mdui-color-purple-100#E1BEE7
- mdui-color-purple-200#CE93D8
- mdui-color-purple-300#BA68C8
- mdui-color-purple-400#AB47BC
- mdui-color-purple-500#9C27B0
- mdui-color-purple-600#8E24AA
- mdui-color-purple-700#7B1FA2
- mdui-color-purple-800#6A1B9A
- mdui-color-purple-900#4A148C
- purple (Couleur d’accent)mdui-color-purple-accent#E040FB
- mdui-color-purple-a100#EA80FC
- mdui-color-purple-a200#E040FB
- mdui-color-purple-a400#D500F9
- mdui-color-purple-a700#AA00FF
- deep-purple (Couleur principale)mdui-color-deep-purple#673AB7
- mdui-color-deep-purple-50#EDE7F6
- mdui-color-deep-purple-100#D1C4E9
- mdui-color-deep-purple-200#B39DDB
- mdui-color-deep-purple-300#9575CD
- mdui-color-deep-purple-400#7E57C2
- mdui-color-deep-purple-500#673AB7
- mdui-color-deep-purple-600#5E35B1
- mdui-color-deep-purple-700#512DA8
- mdui-color-deep-purple-800#4527A0
- mdui-color-deep-purple-900#311B92
- deep-purple (Couleur d’accent)mdui-color-deep-purple-accent#7C4DFF
- mdui-color-deep-purple-a100#B388FF
- mdui-color-deep-purple-a200#7C4DFF
- mdui-color-deep-purple-a400#651FFF
- mdui-color-deep-purple-a700#6200EA
- indigo (Couleur principale)mdui-color-indigo#3F51B5
- mdui-color-indigo-50#E8EAF6
- mdui-color-indigo-100#C5CAE9
- mdui-color-indigo-200#9FA8DA
- mdui-color-indigo-300#7986CB
- mdui-color-indigo-400#5C6BC0
- mdui-color-indigo-500#3F51B5
- mdui-color-indigo-600#3949AB
- mdui-color-indigo-700#303F9F
- mdui-color-indigo-800#283593
- mdui-color-indigo-900#1A237E
- indigo (Couleur d’accent)mdui-color-indigo-accent#536DFE
- mdui-color-indigo-a100#8C9EFF
- mdui-color-indigo-a200#536DFE
- mdui-color-indigo-a400#3D5AFE
- mdui-color-indigo-a700#304FFE
- blue (Couleur principale)mdui-color-blue#2196F3
- mdui-color-blue-50#E3F2FD
- mdui-color-blue-100#BBDEFB
- mdui-color-blue-200#90CAF9
- mdui-color-blue-300#64B5F6
- mdui-color-blue-400#42A5F5
- mdui-color-blue-500#2196F3
- mdui-color-blue-600#1E88E5
- mdui-color-blue-700#1976D2
- mdui-color-blue-800#1565C0
- mdui-color-blue-900#0D47A1
- blue (Couleur d’accent)mdui-color-blue-accent#448AFF
- mdui-color-blue-a100#82B1FF
- mdui-color-blue-a200#448AFF
- mdui-color-blue-a400#2979FF
- mdui-color-blue-a700#2962FF
- light-blue (Couleur principale)mdui-color-light-blue#03A9F4
- mdui-color-light-blue-50#E1F5FE
- mdui-color-light-blue-100#B3E5FC
- mdui-color-light-blue-200#81D4FA
- mdui-color-light-blue-300#4FC3F7
- mdui-color-light-blue-400#29B6F6
- mdui-color-light-blue-500#03A9F4
- mdui-color-light-blue-600#039BE5
- mdui-color-light-blue-700#0288D1
- mdui-color-light-blue-800#0277BD
- mdui-color-light-blue-900#01579B
- light-blue (Couleur d’accent)mdui-color-light-blue-accent#40C4FF
- mdui-color-light-blue-a100#80D8FF
- mdui-color-light-blue-a200#40C4FF
- mdui-color-light-blue-a400#00B0FF
- mdui-color-light-blue-a700#0091EA
- cyan (Couleur principale)mdui-color-cyan#00BCD4
- mdui-color-cyan-50#E0F7FA
- mdui-color-cyan-100#B2EBF2
- mdui-color-cyan-200#80DEEA
- mdui-color-cyan-300#4DD0E1
- mdui-color-cyan-400#26C6DA
- mdui-color-cyan-500#00BCD4
- mdui-color-cyan-600#00ACC1
- mdui-color-cyan-700#0097A7
- mdui-color-cyan-800#00838F
- mdui-color-cyan-900#006064
- cyan (Couleur d’accent)mdui-color-cyan-accent#18FFFF
- mdui-color-cyan-a100#84FFFF
- mdui-color-cyan-a200#18FFFF
- mdui-color-cyan-a400#00E5FF
- mdui-color-cyan-a700#00B8D4
- teal (Couleur principale)mdui-color-teal#009688
- mdui-color-teal-50#E0F2F1
- mdui-color-teal-100#B2DFDB
- mdui-color-teal-200#80CBC4
- mdui-color-teal-300#4DB6AC
- mdui-color-teal-400#26A69A
- mdui-color-teal-500#009688
- mdui-color-teal-600#00897B
- mdui-color-teal-700#00796B
- mdui-color-teal-800#00695C
- mdui-color-teal-900#004D40
- teal (Couleur d’accent)mdui-color-teal-accent#64FFDA
- mdui-color-teal-a100#A7FFEB
- mdui-color-teal-a200#64FFDA
- mdui-color-teal-a400#1DE9B6
- mdui-color-teal-a700#00BFA5
- green (Couleur principale)mdui-color-green#4CAF50
- mdui-color-green-50#E8F5E9
- mdui-color-green-100#C8E6C9
- mdui-color-green-200#A5D6A7
- mdui-color-green-300#81C784
- mdui-color-green-400#66BB6A
- mdui-color-green-500#4CAF50
- mdui-color-green-600#43A047
- mdui-color-green-700#388E3C
- mdui-color-green-800#2E7D32
- mdui-color-green-900#1B5E20
- green (Couleur d’accent)mdui-color-green-accent#69F0AE
- mdui-color-green-a100#B9F6CA
- mdui-color-green-a200#69F0AE
- mdui-color-green-a400#00E676
- mdui-color-green-a700#00C853
- light-green (Couleur principale)mdui-color-light-green#8BC34A
- mdui-color-light-green-50#F1F8E9
- mdui-color-light-green-100#DCEDC8
- mdui-color-light-green-200#C5E1A5
- mdui-color-light-green-300#AED581
- mdui-color-light-green-400#9CCC65
- mdui-color-light-green-500#8BC34A
- mdui-color-light-green-600#7CB342
- mdui-color-light-green-700#689F38
- mdui-color-light-green-800#558B2F
- mdui-color-light-green-900#33691E
- light-green (Couleur d’accent)mdui-color-light-green-accent#B2FF59
- mdui-color-light-green-a100#CCFF90
- mdui-color-light-green-a200#B2FF59
- mdui-color-light-green-a400#76FF03
- mdui-color-light-green-a700#64DD17
- lime (Couleur principale)mdui-color-lime#CDDC39
- mdui-color-lime-50#F9FBE7
- mdui-color-lime-100#F0F4C3
- mdui-color-lime-200#E6EE9C
- mdui-color-lime-300#DCE775
- mdui-color-lime-400#D4E157
- mdui-color-lime-500#CDDC39
- mdui-color-lime-600#C0CA33
- mdui-color-lime-700#AFB42B
- mdui-color-lime-800#9E9D24
- mdui-color-lime-900#827717
- lime (Couleur d’accent)mdui-color-lime-accent#EEFF41
- mdui-color-lime-a100#F4FF81
- mdui-color-lime-a200#EEFF41
- mdui-color-lime-a400#C6FF00
- mdui-color-lime-a700#AEEA00
- yellow (Couleur principale)mdui-color-yellow#FFEB3B
- mdui-color-yellow-50#FFFDE7
- mdui-color-yellow-100#FFF9C4
- mdui-color-yellow-200#FFF59D
- mdui-color-yellow-300#FFF176
- mdui-color-yellow-400#FFEE58
- mdui-color-yellow-500#FFEB3B
- mdui-color-yellow-600#FDD835
- mdui-color-yellow-700#FBC02D
- mdui-color-yellow-800#F9A825
- mdui-color-yellow-900#F57F17
- yellow (Couleur d’accent)mdui-color-yellow-accent#FFFF00
- mdui-color-yellow-a100#FFFF8D
- mdui-color-yellow-a200#FFFF00
- mdui-color-yellow-a400#FFEA00
- mdui-color-yellow-a700#FFD600
- amber (Couleur principale)mdui-color-amber#FFC107
- mdui-color-amber-50#FFF8E1
- mdui-color-amber-100#FFECB3
- mdui-color-amber-200#FFE082
- mdui-color-amber-300#FFD54F
- mdui-color-amber-400#FFCA28
- mdui-color-amber-500#FFC107
- mdui-color-amber-600#FFB300
- mdui-color-amber-700#FFA000
- mdui-color-amber-800#FF8F00
- mdui-color-amber-900#FF6F00
- amber (Couleur d’accent)mdui-color-amber-accent#FFD740
- mdui-color-amber-a100#FFE57F
- mdui-color-amber-a200#FFD740
- mdui-color-amber-a400#FFC400
- mdui-color-amber-a700#FFAB00
- orange (Couleur principale)mdui-color-orange#FF9800
- mdui-color-orange-50#FFF3E0
- mdui-color-orange-100#FFE0B2
- mdui-color-orange-200#FFCC80
- mdui-color-orange-300#FFB74D
- mdui-color-orange-400#FFA726
- mdui-color-orange-500#FF9800
- mdui-color-orange-600#FB8C00
- mdui-color-orange-700#F57C00
- mdui-color-orange-800#EF6C00
- mdui-color-orange-900#E65100
- orange (Couleur d’accent)mdui-color-orange-accent#FFAB40
- mdui-color-orange-a100#FFD180
- mdui-color-orange-a200#FFAB40
- mdui-color-orange-a400#FF9100
- mdui-color-orange-a700#FF6D00
- deep-orange (Couleur principale)mdui-color-deep-orange#FF5722
- mdui-color-deep-orange-50#FBE9E7
- mdui-color-deep-orange-100#FFCCBC
- mdui-color-deep-orange-200#FFAB91
- mdui-color-deep-orange-300#FF8A65
- mdui-color-deep-orange-400#FF7043
- mdui-color-deep-orange-500#FF5722
- mdui-color-deep-orange-600#F4511E
- mdui-color-deep-orange-700#E64A19
- mdui-color-deep-orange-800#D84315
- mdui-color-deep-orange-900#BF360C
- deep-orange (Couleur d’accent)mdui-color-deep-orange-accent#FF6E40
- mdui-color-deep-orange-a100#FF9E80
- mdui-color-deep-orange-a200#FF6E40
- mdui-color-deep-orange-a400#FF3D00
- mdui-color-deep-orange-a700#DD2C00
- brown (Couleur principale)mdui-color-brown#795548
- mdui-color-brown-50#EFEBE9
- mdui-color-brown-100#D7CCC8
- mdui-color-brown-200#BCAAA4
- mdui-color-brown-300#A1887F
- mdui-color-brown-400#8D6E63
- mdui-color-brown-500#795548
- mdui-color-brown-600#6D4C41
- mdui-color-brown-700#5D4037
- mdui-color-brown-800#4E342E
- mdui-color-brown-900#3E2723
- grey (Couleur principale)mdui-color-grey#9E9E9E
- mdui-color-grey-50#FAFAFA
- mdui-color-grey-100#F5F5F5
- mdui-color-grey-200#EEEEEE
- mdui-color-grey-300#E0E0E0
- mdui-color-grey-400#BDBDBD
- mdui-color-grey-500#9E9E9E
- mdui-color-grey-600#757575
- mdui-color-grey-700#616161
- mdui-color-grey-800#424242
- mdui-color-grey-900#212121
- blue-grey (Couleur principale)mdui-color-blue-grey#607D8B
- mdui-color-blue-grey-50#ECEFF1
- mdui-color-blue-grey-100#CFD8DC
- mdui-color-blue-grey-200#B0BEC5
- mdui-color-blue-grey-300#90A4AE
- mdui-color-blue-grey-400#78909C
- mdui-color-blue-grey-500#607D8B
- mdui-color-blue-grey-600#546E7A
- mdui-color-blue-grey-700#455A64
- mdui-color-blue-grey-800#37474F
- mdui-color-blue-grey-900#263238
Classes CSS
Définir le thème
| Nom de classe | Description |
|---|---|
.mdui-theme-primary-[color] | Définit la couleur principale du thème (ajoutée à l’élément <body>). |
.mdui-theme-accent-[color] | Définit la couleur d’accent du thème (ajoutée à l’élément <body>). |
.mdui-theme-layout-dark | Définit un thème sombre (ajoutée à l’élément <body>). |
Couleur d’arrière-plan
| Nom de classe | Description |
|---|---|
.mdui-color-[color] | Définit la couleur d’arrière-plan d’une couleur principale donnée. |
.mdui-color-[color]-accent | Définit la couleur d’arrière-plan d’une couleur d’accent donnée. |
.mdui-color-[color]-[degree] | Définit la couleur d’arrière-plan d’une couleur et d’une saturation données. |
.mdui-color-theme | Définit la couleur d’arrière-plan en fonction du thème de couleur principale défini sur l’élément body. |
.mdui-color-theme-accent | Définit la couleur d’arrière-plan en fonction du thème de couleur d’accent défini sur l’élément body. |
.mdui-color-theme-[degree] | Définit la couleur d’arrière-plan d’une saturation donnée en fonction du thème de couleur principale ou d’accent défini sur l’élément body. |
.mdui-color-black | Définit une couleur d’arrière-plan purement noire. |
.mdui-color-white | Définit une couleur d’arrière-plan purement blanche. |
.mdui-color-transparent | Définit une couleur d’arrière-plan transparente. |
Couleur du texte
| Nom de classe | Description |
|---|---|
.mdui-text-color-[color] | Définit la couleur du texte d’une couleur principale donnée. |
.mdui-text-color-[color]-accent | Définit la couleur du texte d’une couleur d’accent donnée. |
.mdui-text-color-[color]-[degree] | Définit la couleur du texte d’une couleur et d’une saturation données. |
.mdui-text-color-theme | Définit la couleur du texte selon le thème de couleur principale sur l’élément body. |
.mdui-text-color-theme-accent | Définit la couleur du texte selon le thème de couleur d’accent sur l’élément body. |
.mdui-text-color-theme-[degree] | Définit la couleur du texte d’une saturation donnée selon le thème de couleur principale ou d’accent sur l’élément body. |
Couleurs de texte sombres, utilisées sur les arrière-plans clairs :
| Nom de classe | Description |
|---|---|
.mdui-text-color-black | Définit une couleur de texte purement noire. |
.mdui-text-color-black-text | Définit la couleur du texte pour le texte principal. |
.mdui-text-color-black-secondary | Définit la couleur du texte pour le texte secondaire. |
.mdui-text-color-black-disabled | Définit la couleur du texte pour l’état désactivé. |
.mdui-text-color-black-divider | Définit la couleur du texte pour les séparateurs. |
.mdui-text-color-black-icon | Définit la couleur des icônes. |
.mdui-text-color-black-icon-disabled | Définit la couleur des icônes pour l’état désactivé. |
Couleurs de texte claires, utilisées sur les arrière-plans sombres :
| Nom de classe | Description |
|---|---|
.mdui-text-color-white | Définit une couleur de texte purement blanche. |
.mdui-text-color-white-text | Définit la couleur du texte pour le texte principal. |
.mdui-text-color-white-secondary | Définit la couleur du texte pour le texte secondaire. |
.mdui-text-color-white-disabled | Définit la couleur du texte pour l’état désactivé. |
.mdui-text-color-white-divider | Définit la couleur du texte pour les séparateurs. |
.mdui-text-color-white-icon | Définit la couleur des icônes. |
.mdui-text-color-white-icon-disabled | Définit la couleur des icônes pour l’état désactivé. |
Couleurs de texte claires ou sombres qui changent selon la couleur du thème :
| Nom de classe | Description |
|---|---|
.mdui-text-color-theme-text | Définit la couleur du texte pour le texte principal. Sombre par défaut, claire dans un thème sombre. |
.mdui-text-color-theme-secondary | Définit la couleur du texte pour le texte secondaire. Sombre par défaut, claire dans un thème sombre. |
.mdui-text-color-theme-disabled | Définit la couleur du texte pour l’état désactivé. Sombre par défaut, claire dans un thème sombre. |
.mdui-text-color-theme-divider | Définit la couleur du texte pour les séparateurs. Sombre par défaut, claire dans un thème sombre. |
.mdui-text-color-theme-icon | Définit la couleur des icônes. Sombre par défaut, claire dans un thème sombre. |
.mdui-text-color-theme-icon-disabled | Définit la couleur des icônes pour l’état désactivé. Sombre par défaut, claire dans un thème sombre. |