near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Farben & Themen
mdui hat 19 Gruppen von Primärfarben und 16 Gruppen von Akzentfarben aus Material Design integriert. Alle Farben – einschließlich Textfarben auf Hintergründen und Text-Opazität – stimmen mit der offiziellen Material-Design-Dokumentation überein.
Verwandte Themen
Primär- und Akzentfarben
Farben in Material Design sind in Primärfarben (Primary) und Akzentfarben (Accent) unterteilt, jede Farbe hat verschiedene Sättigungen.
In den CSS-Klassennamen der folgenden Dokumentation steht [color] für den Farbnamen und [degree] für die Sättigung.
Primärfarbe
Es gibt insgesamt 19 Primärfarben, einschließlich:
Jede Primärfarbe hat 10 Sättigungsstufen:
50
100
200
300
400
500
600
700
800
900
Akzentfarbe
Es gibt insgesamt 16 Akzentfarben, einschließlich:
Jede Akzentfarbe hat 4 Sättigungsstufen:
a100
a200
a400
a700
Hintergrundfarbe
Der Klassenname für die Hintergrundfarbe lautet .mdui-color-[color]-[degree]. Er legt die Hintergrundfarbe fest und setzt gleichzeitig die Textfarbe und die Text-Opazität für diesen Hintergrund.
Zusätzlich haben sowohl Primär- als auch Akzentfarben eine Standard-Hintergrundfarbenklasse:
.mdui-color-[color]entspricht.mdui-color-[color]-500..mdui-color-[color]-accententspricht.mdui-color-[color]-a200.
Beispiel
<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>Alle verfügbaren Klassen für Hintergrundfarben sind in der untenstehenden Farb-Referenztabelle aufgeführt.
Textfarbe
Der Klassenname für die Textfarbe lautet .mdui-text-color-[color]-[degree].
Zusätzlich haben sowohl Primär- als auch Akzentfarben eine Standard-Textfarbenklasse:
.mdui-text-color-[color]entspricht.mdui-text-color-[color]-500..mdui-text-color-[color]-accententspricht.mdui-text-color-[color]-a200.
Beispiel
<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>Darüber hinaus bietet mdui schwarze und weiße Textfarben sowie Icon-Farben mit Opazität an.
.mdui-text-color-black-*wird für helle Hintergründe verwendet..mdui-text-color-white-*wird für dunkle Hintergründe verwendet.
Beispiel
Themenfarbe
mdui bietet eine Themenfunktion (Theme). Durch Hinzufügen einiger Klassen zum body-Element kann zwischen Themen gewechselt werden, einschließlich Primärfarbe, Akzentfarbe und Hintergrundfarbe.
Die meisten Komponenten von mdui haben Standardfarben. Wenn Themenfarben festgelegt sind, ersetzen diese die Standardfarben der Komponenten.
Primärfarbe
Fügen Sie die Klasse .mdui-theme-primary-[color] zum body-Element hinzu, um die Primärfarbe festzulegen.
Verwenden Sie die folgenden Klassen auf der Seite; diese Farben ändern sich basierend auf der im body festgelegten Primärfarbe:
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]
Akzentfarbe
Fügen Sie die Klasse .mdui-theme-accent-[color] zum body-Element hinzu, um die Akzentfarbe festzulegen.
Verwenden Sie die folgenden Klassen auf der Seite; diese Farben ändern sich basierend auf der im body festgelegten Akzentfarbe:
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]
Dunkles Hintergrundthema
Fügen Sie die Klasse .mdui-theme-layout-dark zum body hinzu, um die gesamte Seite (einschließlich Komponenten) auf einen dunklen Hintergrund einzustellen.
Fügen Sie die Klasse .mdui-theme-layout-auto zum body hinzu, damit sich die Hintergrundfarbe der Seite (einschließlich Komponenten) automatisch an das Thema des Betriebssystems anpasst.
Darüber hinaus ändern die folgenden Klassen ihre Farbe basierend auf der Themenfarbe: Sie erscheinen dunkel bei hellem Thema und hell bei dunklem Thema.
.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
Sie können oben rechts auf der Seite auf das Symbol color_lens klicken, um die Themenfarben einzustellen. Die Primärfarben, Akzentfarben und Themenfarben in der folgenden Tabelle ändern sich entsprechend.
- Primary (Primärfarbe)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 (Akzentfarbe)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%
Farb-Referenztabelle
- red (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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 (Akzentfarbe)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 (Primärfarbe)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
- blue-grey (Primärfarbe)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
CSS-Klassenliste
Thema einstellen
| Klassenname | Beschreibung |
|---|---|
.mdui-theme-primary-[color] | Stellt die Primärfarbe im Thema ein (wird dem <body>-Element hinzugefügt). |
.mdui-theme-accent-[color] | Stellt die Akzentfarbe im Thema ein (wird dem <body>-Element hinzugefügt). |
.mdui-theme-layout-dark | Stellt das dunkle Thema ein (wird dem <body>-Element hinzugefügt). |
Hintergrundfarbe
| Klassenname | Beschreibung |
|---|---|
.mdui-color-[color] | Stellt die Hintergrundfarbe für eine bestimmte Primärfarbe ein. |
.mdui-color-[color]-accent | Stellt die Hintergrundfarbe für eine bestimmte Akzentfarbe ein. |
.mdui-color-[color]-[degree] | Stellt die Hintergrundfarbe mit einer bestimmten Farbe und Sättigung ein. |
.mdui-color-theme | Stellt die Hintergrundfarbe basierend auf der im body definierten Primärfarbe ein. |
.mdui-color-theme-accent | Stellt die Hintergrundfarbe basierend auf der im body definierten Akzentfarbe ein. |
.mdui-color-theme-[degree] | Stellt die Hintergrundfarbe mit einer bestimmten Sättigung basierend auf der im body definierten Primär- oder Akzentfarbe ein. |
.mdui-color-black | Stellt eine rein schwarze Hintergrundfarbe ein. |
.mdui-color-white | Stellt eine rein weiße Hintergrundfarbe ein. |
.mdui-color-transparent | Stellt eine transparente Hintergrundfarbe ein. |
Textfarbe
| Klassenname | Beschreibung |
|---|---|
.mdui-text-color-[color] | Stellt die Textfarbe für eine bestimmte Primärfarbe ein. |
.mdui-text-color-[color]-accent | Stellt die Textfarbe für eine bestimmte Akzentfarbe ein. |
.mdui-text-color-[color]-[degree] | Stellt die Textfarbe mit einer bestimmten Farbe und Sättigung ein. |
.mdui-text-color-theme | Stellt die Textfarbe basierend auf der Primärfarbe im body ein. |
.mdui-text-color-theme-accent | Stellt die Textfarbe basierend auf der Akzentfarbe im body ein. |
.mdui-text-color-theme-[degree] | Stellt die Textfarbe mit einer bestimmten Sättigung basierend auf der Primär- oder Akzentfarbe im body ein. |
Dunkle Textfarbe für helle Hintergründe:
| Klassenname | Beschreibung |
|---|---|
.mdui-text-color-black | Stellt eine rein schwarze Textfarbe ein. |
.mdui-text-color-black-text | Stellt die Textfarbe für Primärtext ein. |
.mdui-text-color-black-secondary | Stellt die Textfarbe für Sekundärtext ein. |
.mdui-text-color-black-disabled | Stellt die Textfarbe für deaktivierten Text ein. |
.mdui-text-color-black-divider | Stellt die Textfarbe für Divider ein. |
.mdui-text-color-black-icon | Stellt die Farbe für Icons ein. |
.mdui-text-color-black-icon-disabled | Stellt die Icon-Farbe für den deaktivierten Zustand ein. |
Helle Textfarbe für dunkle Hintergründe:
| Klassenname | Beschreibung |
|---|---|
.mdui-text-color-white | Stellt eine rein weiße Textfarbe ein. |
.mdui-text-color-white-text | Stellt die Textfarbe für Primärtext ein. |
.mdui-text-color-white-secondary | Stellt die Textfarbe für Sekundärtext ein. |
.mdui-text-color-white-disabled | Stellt die Textfarbe für deaktivierten Text ein. |
.mdui-text-color-white-divider | Stellt die Textfarbe für Divider ein. |
.mdui-text-color-white-icon | Stellt die Farbe für Icons ein. |
.mdui-text-color-white-icon-disabled | Stellt die Icon-Farbe für den deaktivierten Zustand ein. |
Dunkle oder helle Textfarbe, die sich je nach Themenfarbe ändert:
| Klassenname | Beschreibung |
|---|---|
.mdui-text-color-theme-text | Stellt die Textfarbe für Primärtext ein. Standardmäßig dunkel, hell im dunklen Thema. |
.mdui-text-color-theme-secondary | Stellt die Textfarbe für Sekundärtext ein. Standardmäßig dunkel, hell im dunklen Thema. |
.mdui-text-color-theme-disabled | Stellt die Textfarbe für deaktivierten Text ein. Standardmäßig dunkel, hell im dunklen Thema. |
.mdui-text-color-theme-divider | Stellt die Textfarbe für Divider ein. Standardmäßig dunkel, hell im dunklen Thema. |
.mdui-text-color-theme-icon | Stellt die Farbe für Icons ein. Standardmäßig dunkel, hell im dunklen Thema. |
.mdui-text-color-theme-icon-disabled | Stellt die Icon-Farbe für den deaktivierten Zustand ein. Standardmäßig dunkel, hell im dunklen Thema. |