Hai theme, một hệ design tokens

Đặt tên theo vai trò#

Dùng background, foreground, accent, muted và border thay cho tên màu trong từng component.

:root {
  --surface: #ffffff;
  --accent: #165dce;
}
[data-theme="dark"] {
  --surface: #111111;
  --accent: #f3cc46;
}

Tương phản và trạng thái#

Kiểm tra focus, disabled, hover và error trên cả hai theme. Màu đẹp chưa đủ nếu người dùng không nhận biết được nút nào đang được chọn.