Change Text Highlight Color sử dụng CSS 🎨

Trong bài viết này, mình xin hướng dẫn các bạn cách đổi màu đoạn văn khi được bôi đen sử dụng CSS nhé 😁.

Để đổi màu text thì chúng ta đơn giản chỉ cần sử dụng selector ::selection trong CSS và sử dụng thuộc tính background với màu muốn đổi.

::selection {
  background: yellow;
}

Kết quả chúng ta được như dưới đây.

Cách làm rất đơn giản đúng không 😁. Bây giờ chúng ta thử kết hợp với một chút JavaScript để random background khi bôi đen văn bản nhé ^^.

Chúng ta sẽ thử đổi màu highlight với các màu cho trước, để làm điều đó thì các bạn xem bài viết đổi màu background bằng JavaScript để nắm được ý tưởng nhé ^^.

Đầu tiên chúng ta sẽ có một mảng các màu để random, dưới đây là một ví dụ:

const colors = ["#FFFFD0", "#F3CCFF", "#D09CFA", "#A555EC", "#FCE700"];

Sau đó, chúng ta sử dụng event mousedown, khi người dùng nhấn nút chuột để chọn một số văn bản thì event mousedown sẽ được gọi. Vì vậy chúng ta sẽ viết một hàm xử lý với event này.

const colors = ["#FFFFD0", "#F3CCFF", "#D09CFA", "#A555EC", "#FCE700"];

window.addEventListener("mousedown", () => {
  const random = Math.floor(Math.random() * colors.length); // random 0 -> 4

  const randomColor = colors[random];

  document.documentElement.style.setProperty("--highlight-color", randomColor);
});

Ở đoạn code trên, chúng ta viết chức năng random, vì index của mảng colors bắt đầu từ 0 và mảng có 5 màu nên chúng ta sẽ random trong khoảng từ 0 -> 4.

Sau khi đã lấy ngẫu nhiên một màu từ colors, chúng ta sẽ set lại giá trị cho CSS variable --highlight-color bằng màu random. Mình đặt --highlight-color ở thẻ root HTML nên sử dụng document.documentElement.

Với CSS, các bạn có thể khởi tạo --highlight-color với màu bất kỳ hoặc null và sử dụng ::selection với giá trị của --highlight-color.

:root {
  --highlight-color: red;
}

::selection {
  background: var(--highlight-color);
}

Kết quả sẽ được như sau:

Hi vọng bài viết giúp ích cho các bạn, chúng ta sẽ cùng gặp nhau trong các bài viết khác nhé ^^.