Main color and accent color
The colors in Material Design are divided into primary colors (Primary) and accent colors (Accent), and each color has a variety of different saturations.
In the CSS class name of the following document, use [color] Represents the color name,[degree] Represents saturation.
Main color
There are 19 main colors, including:
Each color of the main color has 10 kinds of saturation:
50
100
200
300
400
500
600
700
800
900
Accent color
There are 16 accent colors, including:
Each color has 4 kinds of saturation:
background color
The background color class name is .mdui-color-[color]-[degree]. While setting the background color, it also sets the text color and text opacity in the background color.
In addition, the main color and accent color have a default background color class:
.mdui-color-[color] with .mdui-color-[color]-500 Equivalent..mdui-color-[color]-accent with .mdui-color-[color]-a200 Equivalent.
Example
<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>
Text color
Text color class name mdui-text-color-[color]-[degree] 。
In addition, the main color and accent color have a default text color class:
.mdui-text-color-[color] with .mdui-text-color-[color]-500 Equivalent..mdui-text-color-[color]-accent 和 .mdui-text-color-[color]-a200 Equivalent.
Example
mdui-text-color-blue-900
mdui-text-color-blue
mdui-text-color-blue-a200
mdui-text-color-blue-accent
<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>
In addition, MDUI Black and white text and icon colors with opacity are also provided.
.mdui-text-color-black-* Use for light backgrounds..mdui-text-color-white-* Use for dark backgrounds.
-
mdui-text-color-black-text
87%
-
mdui-text-color-black-secondary
54%
-
mdui-text-color-black-disabled
38%
-
mdui-text-color-black-divider
12%
-
mdui-text-color-black-icon
54%
-
mdui-text-color-black-icon-disabled
26%
-
mdui-text-color-white-text
100%
-
mdui-text-color-white-secondary
70%
-
mdui-text-color-white-disabled
50%
-
mdui-text-color-white-divider
12%
-
mdui-text-color-white-icon
100%
-
mdui-text-color-white-icon-disabled
30%
Theme color
MDUI provides the theme function, you only need to add a few classes in the body to achieve the theme switching function, including the main color, accent color and background color that can be switched.
Most of the MDUI components have default colors. After the theme color is set, these components will also replace the default color with the theme color.
Main color
Add class to body .mdui-theme-primary-[color] To set the main color.
Use the following classes in the page, the colors of these classes will change with the change of the theme color in the body:
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]
Accent color
Add class to body .mdui-theme-accent-[color] To set the accent color
Use the following classes in the page, the colors of these classes will change with the change of the theme color in the body:
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]
Theme color
Add class to body .mdui-theme-layout-dark You can set the entire page including components to a dark background.
In addition, use the following categories on the page. The colors of these categories will change according to the theme color. The light theme is darker, and the darker theme is lighter.
.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
You can click on the color_lens Icon to set the theme color, the main color, accent color, and theme color of the color table below will change accordingly.
-
Primary (Primary color)
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（Accent color）
mdui-color-theme-accent
-
mdui-color-theme-a100
-
mdui-color-theme-a200
-
mdui-color-theme-a400
-
mdui-color-theme-a700
-
mdui-text-color-theme-text
87%
100%
-
mdui-text-color-theme-secondary
54%
70%
-
mdui-text-color-theme-disabled
38%
50%
-
mdui-text-color-theme-divider
12%
12%
-
mdui-text-color-theme-icon
54%
100%
-
mdui-text-color-theme-icon-disabled
26%
30%
CSS List of class names
Set theme
| Class name |
effect |
Description |
.mdui-theme-primary-[color] |
Set the main color in the theme |
add to <body> Element |
.mdui-theme-accent-[color] |
Set the accent color in the theme |
add to <body> Element |
.mdui-theme-layout-dark |
Set to dark theme |
add to <body> Element |
Background color
| Class name |
effect |
.mdui-color-[color] |
Set the background color of the specified main color |
.mdui-color-[color]-accent |
Set the background color of the specified accent color |
.mdui-color-[color]-[degree] |
Set the background color of the specified color and saturation |
.mdui-color-theme |
Set the background color according to the main color theme defined in the body |
.mdui-color-theme-accent |
Set the background color according to the accent color theme defined in the body |
.mdui-color-theme-[degree] |
Set the background color with the specified saturation according to the main color or accent color theme defined in the body |
.mdui-color-black |
Set the pure black background color |
.mdui-color-white |
Set the pure white background color |
.mdui-color-transparent |
Set transparent background color |
Text color
| Class name |
effect |
.mdui-text-color-[color] |
Set the text color of the specified main color |
.mdui-text-color-[color]-accent |
Set the text color of the specified accent color |
.mdui-text-color-[color]-[degree] |
Set the text color of the specified color and saturation |
.mdui-text-color-theme |
according to body Set the text color in the main color theme |
.mdui-text-color-theme-accent |
Set the text color according to the accent color theme in the body |
.mdui-text-color-theme-[degree] |
The text color with the saturation specified according to the main color or accent color in the body |
Dark text color, used in light background:
| Class name |
effect |
.mdui-text-color-black |
Set the pure black text color |
.mdui-text-color-black-text |
Set the text color of the main text |
.mdui-text-color-black-secondary |
Set the text color of the subtext |
.mdui-text-color-black-disabled |
Set the text color in the disabled state |
.mdui-text-color-black-divider |
Set the text color of the dividing line |
.mdui-text-color-black-icon |
Set the color of the icon |
.mdui-text-color-black-icon-disabled |
Set the color of the icon in the disabled state |
Light text color, used in dark background:
| Class name |
effect |
.mdui-text-color-white |
Set the pure white text color |
.mdui-text-color-white-text |
Set the text color of the main text |
.mdui-text-color-white-secondary |
Set the text color of the subtext |
.mdui-text-color-white-disabled |
Set the text color in the disabled state |
.mdui-text-color-white-divider |
Set the text color of the dividing line |
.mdui-text-color-white-icon |
Set the color of the icon |
.mdui-text-color-white-icon-disabled |
Set the color of the icon in the disabled state |
Dark or light text color according to the theme color:
| Class name |
effect |
.mdui-text-color-theme-text |
Set the text color of the main text. The default is dark, and the dark theme is light. |
.mdui-text-color-theme-secondary |
Set the text color of the subtext. The default is dark, and the dark theme is light. |
.mdui-text-color-theme-disabled |
Set the text color in the disabled state. The default is dark, and the dark theme is light. |
.mdui-text-color-theme-divider |
Set the text color of the dividing line. The default is dark, and the dark theme is light. |
.mdui-text-color-theme-icon |
Set the color of the icon. The default is dark, and the dark theme is light. |
.mdui-text-color-theme-icon-disabled |
Set the color of the icon in the disabled state. The default is dark, and the dark theme is light. |