Color Theme
Tuỳ chỉnh màu sắc chủ đề
ZMP Framework cho phép bạn tuỳ chỉnh màu sắc chủ đạo của của các components. Sau khi khởi tạo project sử dụng framework và khai báo màu sắc chủ đề của ứng dụng thông qua bộ cài đặt zmp-cli, project của bạn sẽ được khởi tạo kèm các css variables sau, bạn có thể tuỳ chỉnh lại màu sắc theo thiết kế:
/* Ví dụ màu sắc chủ đạo có hex code #0068FF, rgb(0, 104, 255)
Các màu sắc chủ đạo của component sẽ mặc định dựa theo --zmp-theme-color
*/
:root {
--zmp-theme-color: #0068FF;
--zmp-theme-color-rgb: 0, 104, 255;
--zmp-theme-color-shade: #0057d6;
--zmp-theme-color-tint: #2980ff;
/* màu sắc của các component checkbook, radio, toggle, picker */
--zmp-checkbox-active-color-disabled: var(--zmp-theme-color-shade);
--zmp-radio-active-color-disabled: var(--zmp-theme-color-shade);
--zmp-toggle-active-color-disabled: var(--zmp-theme-color-shade);
--zmp-picker-action-button-hover-bg-color: var(--zmp-theme-color-shade);
/*màu sắc khi touched button typeName="primary"*/
--zmp-button-pressed-bg-color-primary: var(--zmp-theme-color-shade);
/* màu sắc của button có typeName="secondary"*/
--zmp-button-bg-color-secondary: #ffffff;
--zmp-button-pressed-bg-color-secondary: #ffffff;
--zmp-button-pressed-color-secondary: var(--zmp-theme-color);
--zmp-button-border-color-secondary: var(--zmp-theme-color);
/* màu sắc của floating action button*/
--zmp-fab-pressed-bg-color: var(--zmp-theme-color-shade);
}
/* Trường hợp Zalo Mini App có sử dụng dark theme*/
:root.theme-dark,:root .theme-dark {
--zmp-theme-color: #0068FF;
--zmp-theme-color-rgb: 0, 104, 255;
--zmp-theme-color-shade: #0057d6;
--zmp-theme-color-tint: #2980ff;
--zmp-checkbox-active-color-disabled: var(--zmp-theme-color-shade);
--zmp-radio-active-color-disabled: var(--zmp-theme-color-shade);
--zmp-toggle-active-color-disabled: var(--zmp-theme-color-shade);
--zmp-picker-action-button-hover-bg-color: var(--zmp-theme-color-shade);
--zmp-button-pressed-bg-color-primary: var(--zmp-theme-color-shade);
--zmp-button-bg-color-secondary: #ffffff;
--zmp-button-pressed-bg-color-secondary: #ffffff;
--zmp-button-pressed-color-secondary: var(--zmp-theme-color);
--zmp-button-border-color-secondary: var(--zmp-theme-color);
--zmp-tabbar-fill-link-active-color: var(--zmp-theme-color);
--zmp-tabbar-fill-link-active-border-color: var(--zmp-theme-color);
--zmp-fab-pressed-bg-color: var(--zmp-theme-color-shade);
}
Bảng màu Zalo Mini App UI Kit
Zalo Mini App UI được xây dựng dựa trên bộ màu mặc định
| Tên màu | Mã màu | Màu sắc |
|---|---|---|
| red | #ff3b30 | |
| green | #4cd964 | |
| blue | #2196f3 | |
| pink | #ff2d55 | |
| yellow | #ffcc00 | |
| orange | #ff9500 | |
| purple | #9c27b0 | |
| deeppurple | #673ab7 | |
| lightblue | #5ac8fa | |
| teal | #009688 | |
| lime | #cddc39 | |
| deeporange | #ff6b22 | |
| gray | #8e8e93 | |
| white | #ffffff | |
| black | #000000 | |
| bd200 | #81aded | |
| bd300 | #4c8ae5 | |
| bd400 | #3d6eb7 | |
| bd500 | #2e5389 | |
| bd600 | #1e375c | |
| bd700 | #132339 | |
| bl200 | #0043a6 | |
| bl300 | #0068ff | |
| bl400 | #3386ff | |
| bl500 | #66a4ff | |
| bl600 | #99c3ff | |
| bl700 | #cce1ff | |
| nd200 | #dbdfe2 | |
| nd300 | #ccd1d6 | |
| nd400 | #8b8f92 | |
| nd500 | #4a4b4d | |
| nd600 | #19191a | |
| nd700 | #090909 | |
| nl100 | #050a19 | |
| nl200 | #001121 | |
| nl300 | #001a33 | |
| nl400 | #33485c | |
| nl500 | #667685 | |
| nl600 | #99a3ad | |
| nl700 | #bfc6cc | |
| gd300 | #47bd8e | |
| gd400 | #399772 | |
| gd500 | #2b7155 | |
| gd600 | #1c4c39 | |
| gd700 | #122f24 | |
| gl300 | #00c578 | |
| gl400 | #33d193 | |
| gl500 | #66dcae | |
| gl600 | #99e8c9 | |
| gl700 | #ccf3e4 | |
| rd300 | #e1807d | |
| rd400 | #b46664 | |
| rd500 | #874d4b | |
| rd600 | #5a3332 | |
| rd700 | #38201f | |
| rl300 | #ef4e49 | |
| rl400 | #f2716d | |
| rl500 | #f59592 | |
| rl600 | #f9b8b6 | |
| rl700 | #fcdcdb | |
| w300 | #ffffff | |
| w400 | rgba(255, 255, 255, 0.75) | |
| w500 | rgba(255, 255, 255, 0.5) | |
| w600 | rgba(255, 255, 255, 0.25) | |
| w700 | rgba(255, 255, 255, 0.1) | |
| dg300 | #96a3ad | |
| dg400 | #666f76 | |
| dg500 | #363b3e | |
| dg600 | #121415 | |
| dg700 | #060707 | |
| lg300 | #778d9e | |
| lg400 | #92a4b1 | |
| lg500 | #adbbc5 | |
| lg600 | #c9d1d8 | |
| lg700 | #e4e8ec | |
| bk300 | #000000 | |
| bk400 | rgba(0, 0, 0, 0.75) | |
| bk500 | rgba(0, 0, 0, 0.5) | |
| bk600 | rgba(0, 0, 0, 0.25) | |
| bk700 | rgba(0, 0, 0, 0.15) | |
| ol300 | #f5832f | |
| ol400 | #f79c59 | |
| ol500 | #f9b582 | |
| ol600 | #fbcdac | |
| ol700 | #fde6d5 | |
| od300 | #e39f6d | |
| od400 | #b67f57 | |
| od500 | #885f41 | |
| od600 | #5b402c | |
| od700 | #39281b | |
| yl300 | #f8d15a | |
| yl400 | #f9d97b | |
| yl500 | #fbe39c | |
| yl600 | #fcedbd | |
| yl700 | #fef6de | |
| yd300 | #e9d18b | |
| yd400 | #baa76f | |
| yd500 | #8c7d53 | |
| yd600 | #5d5438 | |
| yd700 | #3a3423 | |
| tl300 | #00adf4 | |
| tl400 | #33bcf6 | |
| tl500 | #66cef8 | |
| tl600 | #99defb | |
| tl700 | #cceffd | |
| td300 | #4bb2dd | |
| td400 | #3c8eb1 | |
| td500 | #2d6b85 | |
| td600 | #1e4758 | |
| td700 | #132d37 | |
| pul300 | #7562d8 | |
| pul400 | #9181e0 | |
| pul500 | #aca1e8 | |
| pul600 | #c8c0ef | |
| pul700 | #e3e0f7 | |
| pud300 | #998dd4 | |
| pud400 | #7a71aa | |
| pud500 | #5c557f | |
| pud600 | #3d3855 | |
| pud700 | #262335 | |
| pkl300 | #ea87ff | |
| pkl400 | #ee9fff | |
| pkl500 | #f2b7ff | |
| pkl600 | #f7cfff | |
| pkl700 | #fbe7ff | |
| pkd300 | #e6abf3 | |
| pkd400 | #b889c2 | |
| pkd500 | #8a6792 | |
| pkd600 | #5c4461 | |
| pkd700 | #3a2b3d |
Helper Classes
Zalo Mini App cung cấp một số helper class:
-
color-[color] - Thay dổi màu của một số element:
-
text-color-[color] - Thay đổi text color của một số element:
-
bg-color-[color] - Thay đổi nhanh màu nền của một số element:
-
border-color-[color] - Thay đổi nhanh border color của một số element: