Tùy chỉnh giao diện

Ngay cả việc xây dựng thương hiệu cũng có thể thích ứng. Bạn có thể điều chỉnh cách trình bày trang web của mình cho phù hợp với lựa chọn ưu tiên của người dùng. Nhưng trước tiên, hãy xem cách mở rộng hoạt động xây dựng thương hiệu của trang web để bao gồm cả 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 sẽ điều chỉnh theo màu sắc mà bạn đề xuất. Thêm màu vào 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 khó chịu 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 các thay đổi quá đột ngột, người dùng sẽ rời đi vì khó chịu.

Bạn cũng có thể chỉ định một màu chủ đề trong tệp tệp kê khai ứng dụng web. Đây là một tệp JSON chứa 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 tài liệu. 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ác cặp khoá/giá trị.

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

Nếu khách truy cập quyết định thêm trang web của bạn vào màn hình chính, thì trình duyệt sẽ sử dụng thông tin trong tệp kê khai để hiển thị một 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 lựa chọn ưu tiên cho bảng màu sáng hoặc tối. Vì vậy, bạn nên tối ưu hoá trang web theo lựa chọn ưu tiên về giao diện của người dùng. Bạn có thể truy cập vào 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 nội dung nghe nhì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 prefers-color-scheme cho nội dung nghe nhìn trong SVG. Nếu bạn sử dụng tệp SVG cho biểu tượng trang web, thì tệp này có thể được điều chỉnh cho chế độ tối. Thomas Steiner đã viết về prefers-color-scheme trong biểu tượng yêu thích SVG cho biểu tượng ở chế độ tối.

Tạo giao diện bằng các thuộc tính tuỳ chỉnh

Nếu bạn sử dụng cùng một giá trị màu ở nhiều nơi trong 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 các thuộc tính tuỳ chỉnh CSS để lưu trữ giá trị màu. 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 một biến mà không cần cập nhật tên của biến đó.

Nếu cập nhật các giá trị của thuộc tính tuỳ chỉnh trong truy vấn nội dung nghe nhìn prefers-color-scheme, bạn sẽ không phải viết tất cả bộ chọn hai lầ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);
}

Hãy xem bài viết xây dựng bảng phối màu để biết thêm các ví dụ nâng cao về việc tạo giao diện bằng các 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 phần tử khác trên trang của bạn.

Nếu muốn giảm độ sáng của hình ả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 có thể muốn thay thế hoàn toàn hình ảnh đó ở chế độ tối. Ví dụ: bạn có thể muốn hiện một bản đồ có bảng phối màu tối hơn. Sử dụng phần tử <picture> chứa phần tử <source> có truy vấn nội dung nghe nhì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

Các trình duyệt cung cấp một bảng màu mặc định cho các trường trong 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à chế độ sáng. Nhờ đó, trình duyệt có thể cung cấp kiểu mặc định phù hợp cho các biểu mẫu.

Thêm nội dung 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ể dùng HTML. Thêm đoạn mã này vào head của tài liệu:

<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 trong biểu mẫu.

html {
  accent-color: red;
}

Giao diện tối thường có màu thương hiệu dịu. 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ể giữ tất cả các 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);
}

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 điều chỉnh trang web của mình cho phù hợp với mọi loại yếu tố cần cân nhắc về khả năng hỗ trợ tiếp cận.

Kiểm tra kiến thức của bạn

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