Ngay cả hoạt động xây dựng thương hiệu cũng có thể mang tính thích ứng. Bạn có thể điều chỉnh cách trình bày 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 thích ứng với màu bạn được đề xuất. Hãy thêm màu sắc vào một 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.
Điều này có thể gây choáng ngợp cho người dùng 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 này quá gây khó chịu, người dùng sẽ cảm thấy 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 chứa siêu dữ liệu về trang web của bạn.
Liên kết đến tệp kê khai từ head 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 của bạn 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, 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 thích 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 về bảng màu sáng hoặc màu tối. Đây là cách hay để tối ưu hoá trang web của bạn theo lựa chọn ưu tiên của người dùng về giao diện.
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 nội dung đa phương tiện prefers-color-scheme bên trong SVG.
Nếu sử dụng tệp SVG cho biểu tượng trang web, bạn có thể điều chỉnh tệp đó cho chế độ tối.
Thomas Steiner đã viết về prefers-color-scheme trong biểu tượng trang web SVG cho các biểu tượng chế độ tối.
Sắp xếp theo chủ đề bằng các 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ả bộ chọn trong một truy vấn nội dung đa 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. Thuộc tính tuỳ chỉnh hoạt động như các biến trong một 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 cập nhật giá trị của các thuộc tính tuỳ chỉnh trong một truy vấn phương tiện prefers-color-scheme, bạn sẽ không phải viết tất cả cá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);
}
Xem cách tạo bảng phối màu để biết thêm các ví dụ nâng cao về việc tuỳ chỉnh 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 thuộc tính tuỳ chỉnh tại đó.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Giờ đây, các biểu tượng sẽ thay đổi màu 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 một 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 chúng hoàn toàn ở chế độ tối.
Ví dụ: bạn có thể muốn hiển thị bản đồ với 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 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
Các trình duyệt cung cấp bảng màu mặc định cho các trường biểu mẫu. Hãy 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 phù 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. Thêm thông tin này vào head của các 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 các 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 thuộc tính tuỳ chỉnh cho trường hợp này để có thể giữ tất cả các phần khai báo màu sắc ở 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 giúp trang web thích ứng với mọi yếu tố cần cân nhắc về khả năng hỗ trợ tiếp cận.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức về giao diện
Để cung cấp màu giao diện ảnh hưởng đến trình duyệt bên ngoài trang web, hãy sử dụng:
<meta> "theme-color" (màu giao diện).manifest.json có thể được cung cấp và bao gồm các trường để chỉ định màu giao diện để phủ màu giao diện của ứng dụng khi mở trên màn hình chính của thiết bị di động.<meta> "màu giao diện"<head>, tránh các màu không mong muốn.Để kết nối với lựa chọn ưu tiên của người dùng về giao diện sáng hoặc tối, hãy sử dụng:
(prefers-color-scheme)Bạn hỗ trợ giao diện tối, nhưng tất cả các dữ liệu đầu vào cho biểu mẫu vẫn có giao diện sáng. Bạn có thể làm gì?
html { color-scheme: light dark; } vào CSS của bạn.<meta name="supported-color-schemes" content="light dark"> vào thẻ HTML <head>.