Làm thế nào bạn có thể lập trình thay đổi màu phông chữ dựa trên nền? (Chế độ sáng/tối)
Nếu bạn đã đến thăm Martech Zone gần đây, bạn có thể nhận thấy rằng chúng tôi hiện cung cấp khả năng xem trang web ở chế độ sáng hoặc tối. Chỉ cần tìm kiếm mặt trăng hay mặt trời bên cạnh ngày trong thanh điều hướng trên cùng bên trái trên trang web.
Đó là một tính năng khá thú vị và nó hoạt động rất tốt. Khi tôi khởi chạy một công cụ chuyển đổi mới thành thay đổi HEX thành RGB, tôi thực sự muốn hiển thị màu mà người dùng đang cố gắng tính toán. Tôi không chỉ hiển thị màu mà tôi còn thêm một tính năng rất hay đó là hiển thị tên của màu. Nhưng điều đó đã đưa ra một vấn đề…
Nếu mẫu màu hiển thị màu có nền sáng, bạn sẽ không thể đọc văn bản mà tôi tạo động cho mẫu màu. Vì vậy… tôi phải tạo một chức năng đặt màu phông chữ dựa trên màu nền và liệu có đủ độ tương phản để xem phông chữ hay không.
Chức năng JavaScript cho Chế độ sáng hoặc tối
Tôi cần tạo một hàm trong đó tôi có thể chuyển mã hex cho màu, sau đó trả về phông chữ nên trắng hay đen dựa trên độ tương phản. Hàm JavaScript này đã làm được điều đó…
function contrast(hex) {
var threshold = 149;
let r = 0, g = 0, b = 0;
// 3 digits
if (hex.length == 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
// 6 digits
} else if (hex.length == 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}
Ngưỡng trong chức năng này được sử dụng để xác định xem một màu cụ thể là sáng hay tối. Hàm chuyển đổi mã màu thập lục phân đã cho thành màu đỏ, lục và lam (RGB) thành phần, sau đó sử dụng công thức để tính toán độ sáng cảm nhận được của màu. Nếu độ sáng vượt quá ngưỡng, hàm sẽ trả về #000000
, là mã hex cho màu đen. Nếu độ sáng dưới ngưỡng, hàm sẽ trả về #ffffff
, là mã hex cho màu trắng.
Mục đích của ngưỡng này là để đảm bảo rằng màu văn bản được chọn cho màu nền nhất định có đủ độ tương phản để có thể đọc được dễ dàng. Một nguyên tắc chung là văn bản sáng (ví dụ: trắng hoặc vàng) nên được sử dụng trên nền tối và văn bản tối (ví dụ: đen hoặc xanh lam) nên được sử dụng trên nền sáng. Bằng cách sử dụng một ngưỡng để xác định xem một màu là sáng hay tối, hàm có thể tự động chọn màu văn bản thích hợp cho một màu nền nhất định.
Sử dụng chức năng trên, tôi có thể lập trình áp dụng CSS màu phông chữ dựa trên màu nền. Hãy kiểm tra bộ chuyển đổi và bạn sẽ thấy nó hoạt động tốt như thế nào!