Nhấn vào theo dõi chúng tôi để cập nhật các bài viết mới nhất. Theo dõi!

Hướng dẫn đầy đủ về Dark Mode trên web

Bài viết liên quan:
Chế độ tối đã đạt được rất nhiều sức hút trong thời gian gần đây. Chẳng hạn như Apple đã thêm chế độ tối vào hệ điều hành iOS và MacOS của mình. Windows và Google cũng đã làm như vậy.
Hãy chuyển sang chế độ tối trong ngữ cảnh của các trang web . Chúng tôi sẽ đi sâu vào các tùy chọn và cách tiếp cận khác nhau để triển khai thiết kế chế độ tối và những cân nhắc kỹ thuật mà chúng yêu cầu. Chúng tôi cũng sẽ đề cập đến một số mẹo thiết kế trong quá trình thực hiện.

Sử dụng chế độ sáng - tối theo hệ thống

Cho đến nay, chúng tôi đã sử dụng một nút để chuyển đổi giữa chế độ sáng và tối nhưng chúng tôi có thể đơn giản để hệ điều hành của người dùng thực hiện việc đó giúp chúng tôi. Ví dụ, nhiều hệ điều hành cho phép người dùng chọn giữa các chủ đề sáng và tối trực tiếp trong cài đặt hệ thống.

HTML/CSS

<h1>This is a title</h1>

<p>I am just a boring text, existing here solely for the purpose of this demo</p>

<p>And I am just another one like the one above me, because two is better than having only one</p>

<a href="#">I am a link</a>
body {
  color: #222;
  background: #fff;
  font: 100% system-ui;
}
a {
  color: #0033cc;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #121212;
  }

  body a {
    color: #809fff;
  }
}

HTML/CSS/JS

<h1>This is a title</h1>

<p>I am just a boring text, existing here solely for the purpose of this demo</p>

<p>And I am just another one like the one above me, because two is better than having only one</p>

<a href="#">I am a link</a>
body {
  background: #fff;
  font: 100% system-ui;
}

h1,
p {
  color: #222;
}

body.dark-theme {
  background: #121212;
}
body.dark-theme h1,
body.dark-theme p {
  color: #eee;
}
body.dark-theme a {
  color: #809fff;
}
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (prefersDarkScheme.matches) {
  document.body.classList.add("dark-theme");
} else {
  document.body.classList.remove("dark-theme");
}

Lưu trữ cài đặt người dùng

Những gì chúng tôi đã xem xét cho đến nay chắc chắn đúng như những gì nó nói trong tin: hoán đổi các chủ đề dựa trên tùy chọn hệ điều hành hoặc một lần nhấp vào nút. Điều này là tuyệt vời, nhưng không hiệu quả khi người dùng truy cập một trang khác trên trang web hoặc tải lại trang hiện tại.
Chúng tôi cần lưu lựa chọn của người dùng để nó sẽ được áp dụng nhất quán trên toàn bộ trang web và trong những lần truy cập tiếp theo. Để làm điều đó, chúng tôi có thể lưu lựa chọn của người dùng vào thời điểm localStorage chuyển đổi chủ đề. Cookie cũng rất phù hợp cho công việc.
<button class="btn-toggle">Toggle Dark-Mode</button>
<h1>Hey there! This is just a title</h2>
  <p>I am just a boring text, existing here solely for the purpose of this demo</p>
  <p>And I am just another one like the one above me, because two is better than having only one</p>
body {
  --text-color: #222;
  --bkg-color: #fff;
}
body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--bkg-color);
}

h1,
p {
  color: var(--text-color);
}
const btn = document.querySelector(".btn-toggle");

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  document.body.classList.add("dark-theme");
}

btn.addEventListener("click", function () {
  document.body.classList.toggle("dark-theme");

  let theme = "light";
  if (document.body.classList.contains("dark-theme")) {
    theme = "dark";
  }
  localStorage.setItem("theme", theme);
});

Kết hợp tất cả

  • Tự động tải chủ đề tối hoặc sáng dựa trên tùy chọn hệ thống
  • Cho phép người dùng ghi đè tùy chọn hệ thống của họ theo cách thủ công
  • Duy trì chủ đề ưa thích của người dùng khi tải lại trang
<button class="btn-toggle">Toggle Dark-Mode</button>
<h1>Hey there! This is just a title</h2>
  <p>I am just a boring text, existing here solely for the purpose of this demo</p>
  <p>And I am just another one like the one above me, because two is better than having only one</p>
body {
  --text-color: #222;
  --bkg-color: #fff;
}
body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}

@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --text-color: #eee;
    --bkg-color: #121212;
  }
  body.light-theme {
    --text-color: #222;
    --bkg-color: #fff;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--bkg-color);
}

h1,
p {
  color: var(--text-color);
}
const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-theme");
}

btn.addEventListener("click", function () {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
    var theme = document.body.classList.contains("light-theme")
      ? "light"
      : "dark";
  } else {
    document.body.classList.toggle("dark-theme");
    var theme = document.body.classList.contains("dark-theme")
      ? "dark"
      : "light";
  }
  localStorage.setItem("theme", theme);
});

Tùy chọn bổ sung

Hình ảnh chế độ tối
/* Apply the filter directly on the body tag */
body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}


/* Or apply it via media query */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}
<picture>
  <!-- Use this image if the user's OS setting is light or unset -->
  <source srcset="photo-light.png" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">
  <!-- Use this image if the user's OS setting is dark -->
  <source srcset="photo-dark.png" media="(prefers-color-scheme: dark)">
</picture>
Kiểu chữ ở chế độ tối
body {
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350;
  }
}
Biểu tượng ở chế độ tối
/* SVG icon */
body.dark-theme svg.icon path {
  fill: #efefef;
}
/* Font icon (using Font Awesome as an example) */
body.dark-theme .fa {
  color: #efefef;
}

Getting Info...

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
Trang web bị chặn
Xin lỗi! Trang web này không có sẵn ở quốc gia của bạn.