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;
}