Màu nhấn CSS

Đưa màu sắc thương hiệu của bạn vào thông tin đầu vào trong biểu mẫu HTML tích hợp sẵn bằng một dòng mã.

Adam Argyle

Joey Arhar

Các phần tử biểu mẫu HTML ngày nay khó tuỳ chỉnh. Cảm giác như thể lựa chọn giữa ít hay không có kiểu tuỳ chỉnh hoặc đặt lại kiểu nhập và tạo ứng dụng từ đầu. Việc tạo ứng dụng từ đầu sẽ mang lại nhiều lợi ích hơn hơn dự kiến. Điều này cũng có thể dẫn đến các kiểu bị quên cho trạng thái phần tử (không xác định, tôi đang nhìn bạn) và việc mất đi bộ tính năng hỗ trợ tiếp cận tích hợp sẵn. Để tạo lại hoàn toàn những gì trình duyệt cung cấp có thể cần nhiều hơn hơn là những gì bạn muốn đảm nhận.

accent-color: hotpink;

CSS accent-color trong giao diện người dùng CSS đặc tả ở đây để phủ màu với một dòng CSS, giúp bạn tiết kiệm công sức tuỳ chỉnh bằng cách đưa thương hiệu của bạn vào các yếu tố.

Thuộc tính accent-color cũng hoạt động với color-scheme, cho phép tác giả phủ màu cả hai yếu tố sáng và tối. Trong ví dụ sau đây, khi người dùng có một giao diện tối đang hoạt động, trang sử dụng color-scheme: light dark và sử dụng cùng một accent-color: hotpink cho chế độ tối nút điều khiển phủ màu hồng rực theo chủ đề.

Các phần tử được hỗ trợ

Hiện tại, chỉ 4 phần tử sẽ phủ màu thông qua thuộc tính accent-color: hộp đánh dấu, vô tuyến, phạm vi và tiến trình. Bạn có thể xem trước từng báo cáo tại đây https://accent-color.glitch.me ở chế độ sáng và bảng phối màu tối.

Hộp kiểm

Đài

Phạm vi

Tiến trình

Đảm bảo độ tương phản

Để ngăn các phần tử không thể truy cập từ hiện có, trình duyệt có accent-color cần xác định độ tương phản đủ điều kiện màu được sử dụng cùng với thuộc tính tuỳ chỉnh giọng. Dưới đây là ảnh chụp màn hình minh hoạ cách Chrome 94 (bên trái) và Firefox 92 Mỗi đêm (bên phải) khác nhau về thuật toán:

Điều quan trọng nhất cần nhớ là tin tưởng trình duyệt. Cung cấp màu sắc của thương hiệu và tin tưởng rằng thương hiệu sẽ đưa ra những quyết định sáng suốt cho bạn.

Thêm: Phủ màu nhiều hơn

Bạn có thể thắc mắc cách phủ màu tối đa 4 thành phần hình dạng này? Sau đây là một hộp cát tối thiểu phủ màu:

• vòng lấy nét
• phần văn bản được đánh dấu nổi bật
• liệt kê điểm đánh dấu
• các chỉ báo mũi tên (chỉ dành cho Webkit)
• cuộn thanh thumb (chỉ có trong Firefox)

html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Tương lai tiềm năng

Thông số kỹ thuật không giới hạn việc áp dụng accent-color ở 4 phần tử như minh hoạ trong bài viết này, bạn có thể hỗ trợ thêm sau này. Các yếu tố như <option> đã chọn trong <select> có thể được làm nổi bật bằng accent-color.

Bạn còn muốn phủ màu nội dung nào trên web? Bài đăng trên Twitter @argyleink bằng bộ chọn của bạn và bộ chọn đó có thể nhận được thêm vào bài viết này!