Khi thiết kế bảo: “Đỏ này là điểm nhấn đó anh ơi!”, còn PM thì bảo: “Bên khách họ sợ màu đỏ, đổi hết đi nhé”...
Tôi biết: hành trình diệt màu đỏ chính thức bắt đầu.
🎯 Task nghe thì đơn giản…
“Loại bỏ tất cả màu đỏ trong UI”.
Nghe như một cú find & replace, nhưng thực tế là cả một hành trình truy lùng, phân tích và refactor toàn bộ hệ thống màu. Vì:
Màu đỏ không chỉ là #FF0000.Nó có thể là
#DC2626,text-red-500,text-error,danger,alert,rgba(255, 0, 0, 0.1)— hoặc tệ hơn nữa: một chuỗi hardcode nằm đâu đó giữa component dài 200 dòng.
Vậy làm sao để tìm ra và xoá sạch mọi dấu vết của màu đỏ, mà không bị sót?
🔎 Bước đầu tiên: list tất cả các màu
grep -Eor --include=\*.{js,jsx,ts,tsx,css,scss,html} '#[0-9a-fA-F]{3,6}\b|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(?:0?\.\d+|1(?:\.0)?)\s*\)' ./src | awk -F: '{print $1 ", " $2}' > colors.csv
Kết quả:
Vấn đề là: danh sách này chỉ toàn mã màu, không có cách nào để biết đâu là màu đỏ.
🧠 Cách tôi giải quyết: render màu ra để nhìn bằng mắt
Tôi đã viết một script nhỏ, render toàn bộ danh sách màu ra terminal. Nhờ đó, tôi có thể soi bằng mắt xem đâu là những mã liên quan đến đỏ.
📎
Xem source code tại đây: https://drive.google.com/file/d/1u-Y03Su2-dUEhjuJUgWEG5FoNPgmZJOu/view?usp=sharing
Kết quả sau khi chạy:
✅ Giờ thì chỉ cần theo đường dẫn… và “xử” từng màu đỏ một.
Không còn lẫn lộn, không còn đoán mò. Chỉ cần đi theo danh sách file, tìm đúng dòng, kiểm tra logic — và từ từ xoá sạch từng giọt máu đỏ cuối cùng khỏi giao diện.