Nội dung bài viết
La Kien Vinh Điều chỉnh màu sắc chủ đề cho web, cụ thể là bạn có thể điều chỉnh màu sắc tab-bar trên trình duyệt web Google Chrome Android, Firefox OS để phù hợp với website của bạn với việc sử dụng 1 thẻ meta đơn giản và điều này sẽ tăng rõ hơn khả năng nhận dạng thương hiệu.

Giới thiệu

Tạo ra sự thú vị cho độc giả của website và tạo ra khả năng nhận dạng riêng cho thương hiệu là những điều rất tốt cho những sản phẩm mà bạn đang cung cấp. Bài viết này mang đến cho bạn 1 phương pháp nhỏ thú vị để thay đổi màu sắc trình duyệt web cụ thể trình duyệt Google Chrome trên Android hay Firefox OS.

Tab bar trên trình duyệt màu cam trong STDIO Chrome AndroidTab bar trên trình duyệt màu cam trong STDIO FirefoxOS

Tiền đề bài viết

Từ sự quan sát và yêu cầu hướng dẫn của các thành viên STDIO, tôi tạo ra bài hướng dẫn này nhằm cung cấp 1 cách đơn giản ở mức độ ứng dụng.

Đối tượng hướng đến

Các bạn chỉ cần biết về HTML có thể thử nghiệm điều này bởi vì nó chỉ yêu cầu kiến thức về HTML, biết thêm kiến thức về meta tag sẽ dễ hiểu hơn.

Môi trường thử nghiệm

  • Android 5.0
  • Trình duyệt web Google Chrome hoặc Firefox OS.
  • HTML5

Thực hiện

Thẻ meta quan trọng cần lưu ý

Bạn cần lưu ý thẻ meta bên dưới trước khi bắt đầu

<meta name="theme-color" content="#ff9800">

Các bước thử nghiệm

Tạo file html có các dòng code HTML cơ bản

Tạo file html, trong trường hợp này tôi tạo file html tên là stdio.vn.html và có nội dung sau

<!doctype html>
<html>
	<head>
		
	</head>
	<body>
		STDIO.VN
	</body>
</html>

Thêm thẻ meta cần thiết

Chèn vào giữa thẻ mở và đóng <head>...</head> của file trên với nội dung của thẻ meta sau

<meta name="theme-color" content="#ff9800">

Ta được nội dung đầy đủ như sau

<!doctype html>
<html>
	<head>
		<meta name="theme-color" content="#ff9800">
	</head>
	<body>
		STDIO.VN
	</body>
</html>

Thử nghiệm

Lưu lại và thử nghiệm trên trình duyệt Google Chrome trên thiết bị Android.

Giải thích

Thẻ meta có name="theme-color" sẽ chỉ định cho trình duyệt Chrome biết thay đổi màu sắc của trình duyệt phù hợp với màu sắc ta mong muốn trong thuộc tính content, trong trường hợp này content="#ff9800" với #ff9800 là MÀU CAM đặc trưng của STDIO. Lưu ý rằng màu sắc ở đây sử dụng mã Hexadecimal.

Kết quả

Kết quả trên Chrome AndroidKết quả trên Firefox OS

Download và tự thử nghiệm

Download file stdio.vn.html.zip.

Từng việc làm tối ưu nho nhỏ, bạn sẽ tạo ra được sự hứng thú cho những người tham gia hệ thống của bạn và cho chính bạn, bạn hãy thử ngay với website của mình và xem thành quả. Chúc bạn thành công.

THẢO LUẬN
ĐÓNG