Dark mode đúng như cái tên của nó, để dùng vào buổi tối, thay những màu sáng thành màu tối để đỡ ảnh hưởng đến mắt, nâng cao trải nghiệm người dùng. Đây là 1 trend được dùng nhiều trong thời gian gần đây. Chẳng hạn như Apple đã thêm nó vào hệ điều hành IOS và MacOS của mình. Window và Google cũng đã làm như vậy.
Chuyển giữa 2 chế độBạn đã có chế độ Light mode và muốn tạo thêm chế độ Dark mode? Vậy thì cần có 1 cái gì đó mà thông thường sẽ là 1 button để chuyển giữa 2 chế độ. Có nhiều cách để làm điều đó, trong bài viết này mình sẽ hướng dẫn các bạn 4 cách: - Sử dụng class cho thẻ body
- Tách biệt file CSS
- Sử dụng CSS custom properties
- Sử dụng Server-side script
Sử dụng class cho thẻ bodyTách biệt file CSS <body class="dark-theme || light-theme">
Sử dụng CSS custom properties <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
Sử dụng Server-side script body {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
/* Dark Mode styles */
body.dark-theme {
color: #eee;
background: #121212;
}
body.dark-theme a {
color: #809fff;
}
Cách này là thay đổi class cho thẻ body, để áp dụng cho tất cả CSS ở bên trong luôn. const btn = document.querySelector('.btn-toggle');
// Lắng nghe sự kiện click vào button
btn.addEventListener('click', function() {
// Thêm hoặc xóa class dark-theme ở body
document.body.classList.toggle('dark-theme');
})
Ví dụ chúng ta có 1 đoạn HTML thế này Ý tưởng của phương pháp này là style như bình thường và gọi nó là kiểu mặc định, ví dụ set light-mode là chế độ mặc định, ngoài ra, tạo thêm 1 tập hợp các style cho chế độ còn lại (trong trường hợp này là dark-mode) để trong class mà ta set cho thẻ body. Sau đó dùng thêm JS để chuyển giữa 2 chế độVậy là xong, đơn giản nhỉ! /* light-theme.css */
body {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
DEMO /* dark-theme.css */
body {
color: #eee;
background: #121212;
}
body a {
color: #809fff;
}
Tách biệt CSS Thay vì giữ tất cả CSS trong cùng 1 file, chúng ta có thể tách ra 2 file cho 2 chế độ. Ví dụ chế độ light-mode có file light-theme.scssVà tương tự chúng ta có dark-mode trong dark-theme.css const btn = document.querySelector(".btn-toggle");
const theme = document.querySelector("#theme-link");
// Lắng nghe sự kiện click vào button
btn.addEventListener("click", function() {
// Nếu URL đang là "ligh-theme.css"
if (theme.getAttribute("href") == "light-theme.css") {
// thì chuyển nó sang "dark-theme.css"
theme.href = "dark-theme.css";
} else {
// và ngược lại
theme.href = "light-theme.css";
}
});
Ý tưởng của phương pháp này là style như bình thường và gọi nó là kiểu mặc định, ví dụ set light-mode là chế độ mặc định, ngoài ra, tạo thêm 1 tập hợp các style cho chế độ còn lại (trong trường hợp này là dark-mode) để trong class mà ta set cho thẻ body. Sử dụng CSS custom propertiesSử dụng Server-side script Cách này là thay đổi class cho thẻ body, để áp dụng cho tất cả CSS ở bên trong luôn. body {
--text-color: #222;
--bkg-color: #fff;
--anchor-color: #0033cc;
}
Ví dụ chúng ta có 1 đoạn HTML thế này body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
--anchor-color: #809fff;
}
Ý tưởng của phương pháp này là style như bình thường và gọi nó là kiểu mặc định, ví dụ set light-mode là chế độ mặc định, ngoài ra, tạo thêm 1 tập hợp các style cho chế độ còn lại (trong trường hợp này là dark-mode) để trong class mà ta set cho thẻ body. <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
0Sau đó dùng thêm JS để chuyển giữa 2 chế độ Sử dụng Server-side scriptCách này là thay đổi class cho thẻ body, để áp dụng cho tất cả CSS ở bên trong luôn. Ví dụ chúng ta có 1 đoạn HTML thế nàyÝ tưởng của phương pháp này là style như bình thường và gọi nó là kiểu mặc định, ví dụ set light-mode là chế độ mặc định, ngoài ra, tạo thêm 1 tập hợp các style cho chế độ còn lại (trong trường hợp này là dark-mode) để trong class mà ta set cho thẻ body. <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
2Sau đó dùng thêm JS để chuyển giữa 2 chế độ Vậy là xong, đơn giản nhỉ! DEMO Tách biệt CSSThay vì giữ tất cả CSS trong cùng 1 file, chúng ta có thể tách ra 2 file cho 2 chế độ. Ví dụ chế độ light-mode có file light-theme.scss Và tương tự chúng ta có dark-mode trong dark-theme.cssGiờ hãy liên kết kiểu mặc định vào file HTML, ví dụ là light-mode <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
3<!DOCTYPE html>
<html lang="en">
<head>
<!-- Light theme stylesheet -->
<link href="light-theme.css" rel="stylesheet" id="theme-link">
</head>
</html>
Ta sử dụng ID <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
8 để chuyển giữa 2 chế độ trong JS<body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
4Chúng ta có thể tận dụng sức mạnh của custom properties trong CSS để tạo chế độ dark-mode. Nó giúp chúng ta tránh phải viết cả bộ style cho từng chế độ, việc thay đổi style cũng dễ và nhanh hơn. Trong file HTML chúng ta vẫn sẽ chuyển class giống như cách đầu tiên. <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
5Còn trong file CSS, hãy xác định các giá trị của chế độ light-mode bằng custom properties <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
6Giờ đến các giá trị của chế độ dark-modeCuối cùng sử dụng các giá trị mà chúng ta vừa tạo Chúng ta cũng có thể set tất cả các giá trị cho chế độ mặc định trong <body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
9 và các thuộc tính cho chế độ dark-mode trong body {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
/* Dark Mode styles */
body.dark-theme {
color: #eee;
background: #121212;
}
body.dark-theme a {
color: #809fff;
}
0.Nếu chúng ta đang làm việc với một ngôn ngữ Serer-side, ví dụ như PHP, thì chúng ta có thể sử dụng nó thay vì JS.<body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
1 Chúng ta sẽ sử dụng CSS body {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
/* Dark Mode styles */
body.dark-theme {
color: #eee;
background: #121212;
}
body.dark-theme a {
color: #809fff;
}
1 để làm điều này<body>
<button class="btn-toggle">Toggle Dark Mode</button>
<h2>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>
<a href="#">I am a link, don't click me!</a>
</body>
7Dark mode shadowĐối với shadow, nếu chúng ta chỉ đơn giản đảo ngược dark shadow thành light shadow, thì nhìn sẽ kiểu shadow sáng trên nền tối, khá là kì
Thay vì thế ta có thể sử dụng opacity để tạo cảm giác về chiều sâu, làm nổi bật chủ thể thay cho shadow. Với các lớp càng sát background thì opacity càng cao, và ngược lại (áp dụng cho background color thôi nhé, đừng giảm opacity cả element ) )
Dark mode TypographyTương tự với hình ảnh, font chữ cũng cần cân đối độ tương phản, font quá dày tạo cảm giác bị chói trong khi font quá mảnh lại làm người dùng khó đọc, mỏi mắt khi cứ phải nhìn sát vào màn hình. Với cái này, bạn có thể tham khảo thêm trong bài viết này. Dark mode ColorChữ trắng tinh trên nền đen tuyền sẽ gây chói mắt vì độ tương phản quá lớn. Mẹo ở đây là chúng ta nên sử dụng các màu "gần đen" hoặc "gần trắng" thôi. Với background thì có thể dùng màu body {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
/* Dark Mode styles */
body.dark-theme {
color: #eee;
background: #121212;
}
body.dark-theme a {
color: #809fff;
}
2.
Nguồn: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web |