near_me
Primeros pasos
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downlocal_mall
Recursos
keyboard_arrow_downEl nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.
Color y Temas
mdui incluye de forma integrada 19 grupos de colores primarios y 16 grupos de colores de acento de Material Design. Todos los colores (incluido el color del texto y la opacidad del texto en fondos) son coherentes con la documentación oficial de Material Design.
Lectura relacionada
Colores primarios y de acento
Los colores en Material Design se dividen en colores primarios y de acento; cada uno tiene varios tonos diferentes.
En los nombres de clase CSS de la documentación que sigue, [color] representa el nombre del color y [degree] representa el tono.
Color primario
Hay 19 colores primarios, incluidos:
Cada color primario tiene 10 tonos:
50
100
200
300
400
500
600
700
800
900
Color de acento
Hay 16 colores de acento, incluidos:
Cada color de acento tiene 4 tonos:
a100
a200
a400
a700
Color de fondo
El nombre de la clase para el color de fondo es .mdui-color-[color]-[degree]. Establece el color de fondo y, además, el color del texto y la opacidad del texto de ese fondo.
Además, tanto los colores primarios como los de acento tienen una clase de color de fondo predeterminada:
.mdui-color-[color]es equivalente a.mdui-color-[color]-500..mdui-color-[color]-accentes equivalente a.mdui-color-[color]-a200.
Ejemplo
<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>Todos los nombres de clase de colores de fondo disponibles se enumeran en la tabla de referencia de colores que aparece a continuación.
Color de texto
El nombre de la clase para el color de texto es .mdui-text-color-[color]-[degree].
Además, tanto los colores primarios como los de acento tienen una clase de color de texto predeterminada:
.mdui-text-color-[color]es equivalente a.mdui-text-color-[color]-500..mdui-text-color-[color]-accentes equivalente a.mdui-text-color-[color]-a200.
Ejemplo
<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>Además, mdui ofrece colores de texto e iconos negros y blancos con opacidad.
.mdui-text-color-black-*se usa en fondos claros..mdui-text-color-white-*se usa en fondos oscuros.
Ejemplo
Color del tema
mdui ofrece una función de tema; solo es necesario agregar unas pocas clases al body para cambiar el tema, incluidos el color primario, el color de acento y el color de fondo.
La mayoría de los componentes de mdui tienen colores predeterminados. Después de establecer el color del tema, estos componentes también usarán el color del tema en lugar del color predeterminado.
Color primario
Agrega la clase .mdui-theme-primary-[color] al body para establecer el color primario.
Usa las siguientes clases en la página; estos colores cambiarán según el color del tema definido en el body:
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]
Color de acento
Agrega la clase .mdui-theme-accent-[color] al body para establecer el color de acento.
Usa las siguientes clases en la página; estos colores cambiarán según el color del tema definido en el body:
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]
Tema de fondo oscuro
Agrega la clase .mdui-theme-layout-dark al body para establecer toda la página (incluidos los componentes) con un fondo oscuro.
Agrega la clase .mdui-theme-layout-auto al body para que el color de fondo de toda la página (incluidos los componentes) se ajuste automáticamente según el tema del sistema operativo.
Además, usa las siguientes clases en la página; estos colores cambiarán según el color del tema, mostrando un tono oscuro en los temas claros y uno claro en los temas oscuros.
.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
Puedes hacer clic en el icono color_lens de la esquina superior derecha de la página para ajustar el color del tema; la tabla de colores de abajo mostrará los cambios en los colores primario, de acento y del tema.
- Primary (Color primario)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 (Color de acento)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%
Tabla de referencia de colores
- red (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color de acento)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 (Color primario)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 (Color primario)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 (Color primario)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
Lista de clases CSS
Configurar tema
| Nombre de clase | Descripción |
|---|---|
.mdui-theme-primary-[color] | Establece el color primario del tema (añadido al elemento <body>). |
.mdui-theme-accent-[color] | Establece el color de acento del tema (añadido al elemento <body>). |
.mdui-theme-layout-dark | Establece el tema oscuro (añadido al elemento <body>). |
Color de fondo
| Nombre de clase | Descripción |
|---|---|
.mdui-color-[color] | Establece el color de fondo de un color primario concreto. |
.mdui-color-[color]-accent | Establece el color de fondo de un color de acento concreto. |
.mdui-color-[color]-[degree] | Establece el color de fondo de un color y un tono concretos. |
.mdui-color-theme | Establece el color de fondo según el tema de color primario definido en el body. |
.mdui-color-theme-accent | Establece el color de fondo según el tema de color de acento definido en el body. |
.mdui-color-theme-[degree] | Establece el color de fondo de un tono concreto según el tema de color primario o de acento definido en el body. |
.mdui-color-black | Establece un color de fondo negro puro. |
.mdui-color-white | Establece un color de fondo blanco puro. |
.mdui-color-transparent | Establece un color de fondo transparente. |
Color de texto
| Nombre de clase | Descripción |
|---|---|
.mdui-text-color-[color] | Establece el color de texto de un color primario concreto. |
.mdui-text-color-[color]-accent | Establece el color de texto de un color de acento concreto. |
.mdui-text-color-[color]-[degree] | Establece el color de texto de un color y un tono concretos. |
.mdui-text-color-theme | Establece el color de texto según el tema de color primario del body. |
.mdui-text-color-theme-accent | Establece el color de texto según el tema de color de acento del body. |
.mdui-text-color-theme-[degree] | Establece el color de texto de un tono concreto según el tema de color primario o de acento del body. |
Colores de texto oscuros, usados en fondos claros:
| Nombre de clase | Descripción |
|---|---|
.mdui-text-color-black | Establece un color de texto negro puro. |
.mdui-text-color-black-text | Establece el color de texto para el texto principal. |
.mdui-text-color-black-secondary | Establece el color de texto para el texto secundario. |
.mdui-text-color-black-disabled | Establece el color de texto para el estado deshabilitado. |
.mdui-text-color-black-divider | Establece el color de texto para los separadores. |
.mdui-text-color-black-icon | Establece el color de los iconos. |
.mdui-text-color-black-icon-disabled | Establece el color de los iconos para el estado deshabilitado. |
Colores de texto claros, usados en fondos oscuros:
| Nombre de clase | Descripción |
|---|---|
.mdui-text-color-white | Establece un color de texto blanco puro. |
.mdui-text-color-white-text | Establece el color de texto para el texto principal. |
.mdui-text-color-white-secondary | Establece el color de texto para el texto secundario. |
.mdui-text-color-white-disabled | Establece el color de texto para el estado deshabilitado. |
.mdui-text-color-white-divider | Establece el color de texto para los separadores. |
.mdui-text-color-white-icon | Establece el color de los iconos. |
.mdui-text-color-white-icon-disabled | Establece el color de los iconos para el estado deshabilitado. |
Colores de texto oscuros o claros que cambian según el color del tema:
| Nombre de clase | Descripción |
|---|---|
.mdui-text-color-theme-text | Establece el color de texto para el texto principal. Por defecto es oscuro; en un tema oscuro pasa a ser claro. |
.mdui-text-color-theme-secondary | Establece el color de texto para el texto secundario. Por defecto es oscuro; en un tema oscuro pasa a ser claro. |
.mdui-text-color-theme-disabled | Establece el color de texto para el estado deshabilitado. Por defecto es oscuro; en un tema oscuro pasa a ser claro. |
.mdui-text-color-theme-divider | Establece el color de texto para los separadores. Por defecto es oscuro; en un tema oscuro pasa a ser claro. |
.mdui-text-color-theme-icon | Establece el color de los iconos. Por defecto es oscuro; en un tema oscuro pasa a ser claro. |
.mdui-text-color-theme-icon-disabled | Establece el color de los iconos para el estado deshabilitado. Por defecto es oscuro; en un tema oscuro pasa a ser claro. |