Tùy chỉnh giao diện

Ngay cả thương hiệu cũng có thể mang lại phản hồi. Bạn có thể điều chỉnh bố cục trang web để phù hợp với lựa chọn ưu tiên của người dùng. Nhưng trước tiên, dưới đây là cách mở rộng thương hiệu trang web của bạn để bao gồm chính trình duyệt.

Tuỳ chỉnh giao diện trình duyệt

Một số trình duyệt cho phép bạn đề xuất màu giao diện dựa trên bảng màu của trang web. Giao diện của trình duyệt điều chỉnh theo màu được đề xuất. Thêm màu sắc trong phần tử meta có tên là theme-color trong head của các trang.

<meta name="theme-color" content="#00D494">

Bạn có thể cập nhật giá trị của theme-color bằng JavaScript. Nhưng hãy sử dụng sức mạnh này một cách khôn ngoan. Người dùng có thể cảm thấy choáng ngợp nếu bảng phối màu của trình duyệt thay đổi quá thường xuyên. Hãy nghĩ đến những cách tinh tế để điều chỉnh màu giao diện. Nếu những thay đổi quá gây khó chịu, người dùng sẽ bỏ đi vì khó chịu.

Bạn cũng có thể chỉ định màu giao diện trong tệp tệp kê khai ứng dụng web. Đây là tệp JSON có siêu dữ liệu về trang web của bạn.

Đường liên kết đến tệp kê khai từ head của các tài liệu của bạn. Sử dụng phần tử link có giá trị rel là manifest.

<link rel="manifest" href="/manifest.json">

Trong tệp kê khai, hãy liệt kê siêu dữ liệu bằng cách sử dụng cặp khoá/giá trị.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Nếu một khách truy cập quyết định thêm trang web của bạn vào màn hình chính, trình duyệt sẽ sử dụng thông tin trong tệp kê khai của bạn để hiển thị lối tắt phù hợp.

Cung cấp chế độ tối

Nhiều hệ điều hành cho phép người dùng chỉ định tùy chọn bảng màu sáng hoặc tối, bạn nên tối ưu hoá trang web theo tuỳ chọn giao diện của người dùng. Bạn có thể sử dụng lựa chọn ưu tiên này trong một tính năng đa phương tiện có tên là prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Chỉ định màu giao diện bằng tính năng đa phương tiện prefers-color-scheme trong phần tử meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Bạn cũng có thể dùng tính năng nghe nhìn prefers-color-scheme bên trong SVG. Nếu sử dụng tệp SVG cho biểu tượng trang web của mình, bạn có thể điều chỉnh tệp đó theo chế độ tối. Thomas Steiner đã viết về prefers-color-scheme trong biểu tượng trang web SVG cho biểu tượng chế độ tối.

Sắp xếp giao diện bằng thuộc tính tuỳ chỉnh

Nếu bạn sử dụng các giá trị màu giống nhau ở nhiều vị trí trong toàn bộ CSS, thì việc lặp lại tất cả các bộ chọn trong một truy vấn phương tiện prefers-color-scheme có thể khá tẻ nhạt.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

Sử dụng thuộc tính tuỳ chỉnh CSS để lưu trữ các giá trị màu của bạn. Thuộc tính tuỳ chỉnh hoạt động giống như các biến trong ngôn ngữ lập trình. Bạn có thể cập nhật giá trị của biến mà không cần cập nhật tên của biến.

Nếu bạn cập nhật giá trị của thuộc tính tùy chỉnh trong truy vấn phương tiện prefers-color-scheme, bạn sẽ không phải viết hai lần tất cả các bộ chọn.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Xem tạo bảng phối màu để biết các ví dụ nâng cao hơn về cách tuỳ chỉnh giao diện bằng thuộc tính tuỳ chỉnh.

Hình ảnh

Nếu đang sử dụng SVG trong HTML, bạn cũng có thể áp dụng các thuộc tính tuỳ chỉnh ở đó.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Giờ đây, các biểu tượng sẽ thay đổi màu sắc cùng với các thành phần khác trên trang.

Nếu muốn giảm độ sáng của ảnh chụp khi hiển thị ở chế độ tối, bạn có thể áp dụng bộ lọc trong CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Đối với một số hình ảnh, bạn nên hoán đổi hoàn toàn những hình ảnh này ở chế độ tối. Ví dụ: bạn có thể muốn hiển thị bản đồ bằng bảng phối màu tối hơn. Sử dụng phần tử <picture> chứa phần tử <source> với truy vấn phương tiện prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Biểu mẫu

Trình duyệt cung cấp bảng màu mặc định cho các trường của biểu mẫu. Cho trình duyệt biết rằng trang web của bạn cung cấp cả chế độ tối và sáng. Bằng cách đó, trình duyệt có thể cung cấp kiểu mặc định thích hợp cho biểu mẫu.

Thêm đoạn mã này vào CSS của bạn:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

Bạn cũng có thể sử dụng HTML. Hãy thêm mã này vào head tài liệu của bạn:

<meta name="supported-color-schemes" content="light dark">

Sử dụng thuộc tính accent-color trong CSS để tạo kiểu cho hộp đánh dấu, nút chọn và một số trường khác của biểu mẫu.

html {
  accent-color: red;
}

Thông thường, giao diện tối sẽ có màu sắc thương hiệu dịu hơn. Bạn có thể cập nhật giá trị accent-color cho chế độ tối.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

Bạn nên sử dụng một thuộc tính tuỳ chỉnh cho việc này để có thể lưu tất cả nội dung khai báo màu ở cùng một nơi.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Việc cung cấp chế độ tối chỉ là một ví dụ về việc điều chỉnh trang web cho phù hợp với lựa chọn ưu tiên của người dùng. Tiếp theo, bạn sẽ tìm hiểu cách làm cho trang web của mình thích ứng với mọi yếu tố cần cân nhắc về hỗ trợ tiếp cận.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về giao diện