near_me
Начало работы
keyboard_arrow_downlayers
Стили
keyboard_arrow_downwidgets
Компоненты
keyboard_arrow_downЭффект rippleКнопкиПлавающая кнопка (FAB)Выпадающий списокРазделительРаскрывающаяся панельТекстовое полеЭлементы выбораСлайдерСписокЭлементы управления спискаСетка-списокВкладкиТулбарПанель приложенияБоковая панель (Drawer)Нижняя навигацияКарточкиЧипыТултипыСнэкбарыТаблицыДиалогиМенюИндикаторы прогресса
local_mall
Ресурсы
keyboard_arrow_downНовый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.
Цвета и темы
mdui включает в себя 19 групп основных цветов и 16 групп акцентных цветов Material Design. Все цвета (включая цвет текста на фоне и непрозрачность текста) соответствуют официальной документации Material Design.
Связанное чтение
Основные и акцентные цвета
Цвета в Material Design делятся на основные (Primary) и акцентные (Accent), каждый из которых имеет несколько уровней насыщенности.
В именах классов CSS далее в документации [color] обозначает название цвета, а [degree] — насыщенность.
Основной цвет
Всего существует 19 основных цветов, включая:
Каждый основной цвет имеет 10 уровней насыщенности:
50
100
200
300
400
500
600
700
800
900
Акцентный цвет
Всего существует 16 акцентных цветов, включая:
Каждый акцентный цвет имеет 4 уровня насыщенности:
a100
a200
a400
a700
Цвет фона
Класс цвета фона имеет вид .mdui-color-[color]-[degree]. Он устанавливает цвет фона, а также соответствующий цвет и непрозрачность текста для этого фона.
Кроме того, у основных и акцентных цветов есть класс фона по умолчанию:
.mdui-color-[color]и.mdui-color-[color]-500эквивалентны..mdui-color-[color]-accentи.mdui-color-[color]-a200эквивалентны.
Пример
<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>Все доступные названия классов фона перечислены в таблице цветов ниже.
Цвет текста
Класс цвета текста имеет вид .mdui-text-color-[color]-[degree].
Кроме того, у основных и акцентных цветов есть класс цвета текста по умолчанию:
.mdui-text-color-[color]и.mdui-text-color-[color]-500эквивалентны..mdui-text-color-[color]-accentи.mdui-text-color-[color]-a200эквивалентны.
Пример
<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>Кроме того, mdui предоставляет черный и белый цвета текста и иконок с прозрачностью.
.mdui-text-color-black-*используется для светлого фона..mdui-text-color-white-*используется для тёмного фона.
Пример
Цвет темы
mdui поддерживает темы. Переключение тем (включая основной, акцентный цвета и цвет фона) осуществляется добавлением нескольких классов к тегу body.
Большинство компонентов mdui имеют цвета по умолчанию. После установки цветов темы эти компоненты заменят свои цвета по умолчанию на цвета темы.
Основной цвет
Добавьте класс .mdui-theme-primary-[color] к body, чтобы установить основной цвет.
Используйте следующие классы на странице, их цвета будут меняться в зависимости от основного цвета темы в body:
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]
Акцентный цвет
Добавьте класс .mdui-theme-accent-[color] к body, чтобы установить акцентный цвет.
Используйте следующие классы на странице, их цвета будут меняться в зависимости от акцентного цвета темы в body:
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]
Тема с тёмным фоном
Добавьте класс .mdui-theme-layout-dark к body, чтобы установить тёмный фон для всей страницы (включая компоненты).
Добавьте класс .mdui-theme-layout-auto к body, чтобы цвет фона всей страницы (включая компоненты) автоматически подстраивался под тему операционной системы.
Кроме того, на странице можно использовать следующие классы, цвета которых меняются в зависимости от цветовой схемы: они отображаются тёмными в светлой теме и светлыми в тёмной теме.
.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
Вы можете нажать на иконку color_lens в правом верхнем углу страницы, чтобы настроить цвета темы. Основной, акцентный цвета и тема в таблице цветов ниже изменятся соответствующим образом.
- Primary (Основной цвет)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 (Акцентный цвет)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%
Таблица цветов
- red (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Акцентный цвет)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 (Основной цвет)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 (Основной цвет)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 (Основной цвет)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-классов
Настройка темы
| Имя класса | Описание |
|---|---|
.mdui-theme-primary-[color] | Задает основной цвет темы (добавляется к элементу <body>). |
.mdui-theme-accent-[color] | Задает акцентный цвет темы (добавляется к элементу <body>). |
.mdui-theme-layout-dark | Задает тёмную тему (добавляется к элементу <body>). |
Цвет фона
| Имя класса | Описание |
|---|---|
.mdui-color-[color] | Задает цвет фона для указанного основного цвета. |
.mdui-color-[color]-accent | Задает цвет фона для указанного акцентного цвета. |
.mdui-color-[color]-[degree] | Задает цвет фона с указанным цветом и насыщенностью. |
.mdui-color-theme | Задает цвет фона в соответствии с основным цветом темы, определенным в body. |
.mdui-color-theme-accent | Задает цвет фона в соответствии с акцентным цветом темы, определенным в body. |
.mdui-color-theme-[degree] | Задает цвет фона с указанной насыщенностью в соответствии с основным или акцентным цветом темы, определенным в body. |
.mdui-color-black | Устанавливает чисто черный цвет фона. |
.mdui-color-white | Устанавливает чисто белый цвет фона. |
.mdui-color-transparent | Устанавливает прозрачный цвет фона. |
Цвет текста
| Имя класса | Описание |
|---|---|
.mdui-text-color-[color] | Задает цвет текста для указанного основного цвета. |
.mdui-text-color-[color]-accent | Задает цвет текста для указанного акцентного цвета. |
.mdui-text-color-[color]-[degree] | Задает цвет текста с указанным цветом и насыщенностью. |
.mdui-text-color-theme | Задает цвет текста в соответствии с основным цветом темы в body. |
.mdui-text-color-theme-accent | Задает цвет текста в соответствии с акцентным цветом темы в body. |
.mdui-text-color-theme-[degree] | Задает цвет текста с указанной насыщенностью в соответствии с основным или акцентным цветом темы в body. |
Тёмный цвет текста, используется на светлом фоне:
| Имя класса | Описание |
|---|---|
.mdui-text-color-black | Устанавливает чисто черный цвет текста. |
.mdui-text-color-black-text | Устанавливает цвет основного текста. |
.mdui-text-color-black-secondary | Устанавливает цвет вторичного текста. |
.mdui-text-color-black-disabled | Устанавливает цвет текста в состоянии disabled. |
.mdui-text-color-black-divider | Устанавливает цвет текста разделителя (divider). |
.mdui-text-color-black-icon | Устанавливает цвет иконки. |
.mdui-text-color-black-icon-disabled | Устанавливает цвет иконки в состоянии disabled. |
Светлый цвет текста, используется на тёмном фоне:
| Имя класса | Описание |
|---|---|
.mdui-text-color-white | Устанавливает чисто белый цвет текста. |
.mdui-text-color-white-text | Устанавливает цвет основного текста. |
.mdui-text-color-white-secondary | Устанавливает цвет вторичного текста. |
.mdui-text-color-white-disabled | Устанавливает цвет текста в состоянии disabled. |
.mdui-text-color-white-divider | Устанавливает цвет текста разделителя (divider). |
.mdui-text-color-white-icon | Устанавливает цвет иконки. |
.mdui-text-color-white-icon-disabled | Устанавливает цвет иконки в состоянии disabled. |
Тёмный или светлый цвет текста, меняющийся в зависимости от темы:
| Имя класса | Описание |
|---|---|
.mdui-text-color-theme-text | Устанавливает цвет основного текста. По умолчанию тёмный, в тёмной теме — светлый. |
.mdui-text-color-theme-secondary | Устанавливает цвет вторичного текста. По умолчанию тёмный, в тёмной теме — светлый. |
.mdui-text-color-theme-disabled | Устанавливает цвет текста в состоянии disabled. По умолчанию тёмный, в тёмной теме — светлый. |
.mdui-text-color-theme-divider | Устанавливает цвет текста разделителя (divider). По умолчанию тёмный, в тёмной теме — светлый. |
.mdui-text-color-theme-icon | Устанавливает цвет иконки. По умолчанию тёмный, в тёмной теме — светлый. |
.mdui-text-color-theme-icon-disabled | Устанавливает цвет иконки в состоянии disabled. По умолчанию тёмный, в тёмной теме — светлый. |