Foundations
Theming
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
Section 01
Modes Side by Side
Ô đầu tiên không đặt thuộc tính nào, nên chạy theo Mode bar ở trên. Các ô còn lại tự đặt thuộc tính lên chính nó. Đổi Mode trên Mode bar thì ô đầu đổi, các ô kia giữ nguyên.
Color scheme: data-theme
Brand: data-brand
Density: data-density
Radius: data-radius
Emphasis: data-emphasis
Type scale: data-type-scale
Thuộc tính đặt trên thẻ nào cũng được, không cần đặt ở gốc trang. Mọi thẻ con bên trong đổi theo.
Section 02
Nesting Goes One Way
Trước khi lồng theme, cần biết một giới hạn: từ mặc định đổi sang giá trị khác được, nhưng từ giá trị khác quay về mặc định thì không.
data-theme="light" đặt trong vùng dark không có tác dụng
Why
/* tokens.css định nghĩa mặc định ở :root TRẦN */
:root { --color-background-canvas-default: #F7F7F7 }
:root[data-theme="dark"],
[data-theme="dark"] { --color-background-canvas-default: #111111 }
/* KHÔNG có rule nào cho [data-theme="light"] */Custom property (biến CSS) kế thừa từ thẻ cha. Giá trị mặc định chỉ khai báo ở :root, không có selector [data-theme="light"] riêng. Vì thế, thẻ con đặt "light" không khớp rule nào và giữ giá trị dark của thẻ cha.
Khi dùng, chọn một hướng rồi lồng theo hướng đó. Bản hiện tại chưa làm được một vùng sáng nằm trong trang tối bằng thuộc tính. Muốn làm được, token phải khai báo thêm giá trị mặc định dưới selector [data-theme="light"].
Section 03
Usage
HTML Attributes
<!-- Default: no attribute needed --> <html> <!-- Dark mode for the whole page --> <html data-theme="dark"> <!-- Compact density for one area only --> <div data-density="compact"> ... </div> <!-- Several Modes together --> <html data-theme="dark" data-brand="cas-id" data-radius="rounded">
Giá trị đầu tiên của mỗi Mode là mặc định và nằm ở khối :root. Vì thế, đặt data-theme="light" không sai nhưng thừa.
Không cần viết media query prefers-color-scheme, vì design system không đọc giá trị này.