Đổi toàn bộ màu mà không phải sửa 31 file

Đếm trước khi bắt đầu

Việc đầu tiên là đếm. 972 chỗ dùng token màu, nằm trong 31 trên 44 file component. Sửa tay không phải là một ngày công, mà là một ngày công cộng với mọi lỗi bạn gây ra trong cả nghìn lần sửa nhỏ.

Tên thì vốn đã đúng

Các dải màu tên là ground, surface, ink, sand và brand. Đó là tên mô tả vai trò chứ không mô tả màu, nên sau khi đổi bảng màu chúng vẫn đúng. Chỉ giá trị bên dưới là phải đổi.

Thế nên chúng tôi để nguyên cả 972 utility và trỏ các dải màu sang CSS variable. Giờ một class trên thẻ gốc đổi theme cả site, và không component nào còn giữ mã hex.

Chi tiết quyết định

Viết biến dưới dạng kênh RGB, đừng viết hex. Cú pháp alpha xuất hiện 108 lần trong codebase này, mà nó không cắt được alpha ra từ một chuỗi hex:

--fg: 237 237 237;

ink: "rgb(var(--fg) / <alpha-value>)"

Vẫn đúng giá trị mà tài liệu nhận diện in ra. Chỉ khác cách viết — và chính cách viết mới là thứ giữ cho cú pháp độ mờ còn chạy.

Chỗ cách này không ăn

Có mười mã màu nằm cứng trong bộ minh hoạ. Chúng không đi theo biến được, nên vẫn là màu kem trên nền gần đen cho tới khi được đưa vào token. Bộ giá trị tối đầu tiên chúng tôi chọn làm vật thể chìm hẳn vào nền: một khối vẽ phải sáng hơn mặt đất nó đang đứng, và đó là phán đoán không biến nào làm hộ bạn.