Đặt màu JavaScript

Một trong nhiều điểm thu hút của các thư viện CSS như Sass và Less là các chức năng thao tác màu sắc phong phú của chúng như làm sáng, làm tối, bão hòa, v.v. Với sự phổ biến ngày càng tăng của CSS-in-JS, nhu cầu về JavaScript (JS) tương đương đã tăng theo. Ngay lập tức, một số thư viện JS để chuyển đổi màu sắc và thao tác đã được cắt xén để giúp công việc của các nhà phát triển web dễ dàng hơn. Trên thực tế, ngay bây giờ thật khó để giải quyết nên sử dụng cái nào. Một thư viện được đề xuất bởi thư viện JSS CSS-in-JS phổ biến được gọi đơn giản là “màu“. Nó khá phong phú về tính năng, có nhiều thứ để cung cấp hơn là color2k và kích thước nhỏ hơn chroma. js. Hướng dẫn phát triển web này sẽ cung cấp tổng quan về một số tính năng của màu sắc và đưa chúng hoạt động trong Ứng dụng trang đơn góc (SPA)

Trước khi bắt đầu, bạn có thể muốn xem hướng dẫn Giới thiệu về CSS-in-JS của chúng tôi

Cách thiết lập và cài đặt thư viện màu JSS

Cách khuyến nghị để cài đặt màu là sử dụng Trình quản lý gói nút (NPM). Lệnh đơn giản là

$ npm install color

Hoặc thậm chí

const Color = require('color');

Sau đó, bạn có thể tham khảo nó trong nút của mình. js sử dụng yêu cầu

const Color = require('color');

Trong Angular, bạn nên sử dụng nhập

import Color from 'color';

Đối tượng Màu được hiển thị cung cấp một vài hàm tạo khác nhau để lựa chọn, hầu hết trong số chúng chấp nhận một số hoán vị của các giá trị Red Green Blue (RGB). Nó cũng sẽ chấp nhận một số chuỗi hạn chế, chẳng hạn như định dạng HEX thường được sử dụng

const color = Color('#FFFFFF');
const color = Color('rgb(255, 255, 255)');
const color = Color({r: 255, g: 255, b: 255});
const color = Color.rgb(255, 255, 255);
const color = Color.rgb([255, 255, 255]);

Dưới vỏ bọc, các hàm tạo Chuỗi được xử lý bởi thư viện chuỗi màu

Bạn có thể tìm hiểu thêm về các tùy chọn tạo kiểu động bằng cách đọc hướng dẫn Tạo kiểu động với JSS của chúng tôi

Khám phá API màu JS

API của Color được lấy cảm hứng rất nhiều từ color-js, có chức năng thao tác gần giống với chức năng của các công cụ CSS như Sass, LESS và Stylus. Tuy nhiên, trước khi chúng ta đến với những điều đó, hãy xem cách chuyển đổi màu sang các định dạng khác

CSS hỗ trợ vô số loại màu, từ các tên đặt trước như “aliceblue“, và “teal” cho đến HEX (“#ee652e“), RGB (rgb(138, 238, 130)) và RGBA (rgba(0,255,0, . 75))

Tìm kiếm giá trị số rgb?

color.hex() // #ffffff

Chuyển đổi màu thành đối tượng rgb

color.object(); // {r: 255, g: 255, b: 255}

Đây là cách đặt hàm băm của giá trị màu và phản ánh mô hình hiện tại của màu

color.rgb().array() // [255, 255, 255]

Để nhận các giá trị rgb riêng lẻ, hãy sử dụng các giá trị này

Đọc. Sử dụng một dịch vụ góc để đọc các biến Sass

Hàm thao tác màu và màu CSS

Sass đi kèm với rất nhiều chức năng tuyệt vời có thể dễ dàng áp dụng cho màu CSS. Các chức năng này loại bỏ một số khó khăn trong việc lựa chọn và thao tác màu sắc. Chúng bao gồm làm tối và sáng, bão hòa và khử bão hòa, rgba, v.v. Tương tự, với thư viện màu. Đây là một mẫu

//lighten by 50%
color.lighten(0.5)     // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
//darken by 50%
color.darken(0.5)      // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color.saturate(0.5)    // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color.desaturate(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
rgba(10, 10, 10, 0.8)

Các chức năng thao tác hữu ích khác bao gồm

const Color = require('color');

Tất cả các chức năng trên có thể được xâu chuỗi lại với nhau

const Color = require('color');

Các hàm khác cung cấp thông tin về một màu

const Color = require('color');

Sử dụng màu sắc. js để đặt màu chủ đề

Trong một vài bài viết trước về CSS-in-JS, chúng tôi đã điều chỉnh Bản trình diễn sử dụng dịch vụ góc để đọc biến Sass để sử dụng JSS để đặt màu của thành phần Góc thông qua các tham số @Input. Mặc dù JSS và màu sắc. js tạo thành một cặp hoàn hảo, mỗi thư viện có thể được sử dụng độc lập với nhau. Để nhấn mạnh điểm đó, chúng ta sẽ áp dụng màu. js vào Dịch vụ màu xác định màu chủ đề cho ứng dụng

trong ứng dụng. thành phần. scss, các hàm Sass được sử dụng để đặt phiên bản sáng và tối của màu cơ bản

const Color = require('color');

Hãy tưởng tượng một tình huống trong đó ứng dụng của chúng ta được xây dựng bằng vanilla CSS thay vì Sass. Nếu không có quyền truy cập vào các chức năng của Sass, chúng tôi sẽ yêu cầu một phương tiện khác để tác động đến các màu cơ bản. Đó sẽ là cách sử dụng lý tưởng của thư viện màu

Chúng tôi vẫn có quyền truy cập vào ba màu cơ bản thông qua các biến CSS

const Color = require('color');

Giờ đây, trong loadColors(), chúng ta có thể thêm hai lệnh gọi bổ sung vào hàm setMapColor() mới cho từng biến thể sáng và tối của thuộc tính CSS

const Color = require('color');

Trích xuất mã để đặt mục nhập _colorMap thành hàm trợ giúp chỉ có ý nghĩa vì chúng tôi phải thực hiện ba lần cho mỗi thuộc tính CSS

const Color = require('color');

Bạn có thể thấy tất cả các mã trên hoạt động cùng nhau như thế nào trong bản demo stackblitz

Sự kết luận

Có một vài lý do để yêu thích các thư viện màu như color. js. Đầu tiên, việc sử dụng JavaScript để thao tác màu sắc cung cấp phạm vi bổ sung và thực thi động để hoàn thành những việc khá khó khăn khi sử dụng CSS, ngay cả khi có sự trợ giúp từ các thư viện tiện ích mở rộng như Sass và Ít hơn. Một tính năng hấp dẫn khác là tính dễ sử dụng của chúng, ít nhất là khi màu. js quan tâm

Làm cách nào để đặt màu trong JavaScript?

Làm cách nào để thay đổi màu động trong JavaScript?

Làm cách nào để lấy màu trong JavaScript?

Làm cách nào để thay đổi màu của trường văn bản trong JavaScript?