Hướng dẫn dark mode html - html chế độ tối

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ẻ body

Tách biệt file CSS

Sử dụng CSS custom properties

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

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.scss

Và 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 properties

Sử 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.

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

0

Sau đó dùng thêm JS để chuyển giữa 2 chế độ

Sử 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.

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.

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

2

Sau đó dùng thêm JS để chuyển giữa 2 chế độ

Vậy là xong, đơn giản nhỉ!

DEMO

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.scss

Và tương tự chúng ta có dark-mode trong dark-theme.css

Giờ hãy liên kết kiểu mặc định vào file HTML, ví dụ là light-mode

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

3

Ta sử dụng ID

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

8 để chuyển giữa 2 chế độ trong JS

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

4

Chú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.

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

5

Còn trong file CSS, hãy xác định các giá trị của chế độ light-mode bằng custom properties

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

6

Giờ đến các giá trị của chế độ dark-mode

Cuố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

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

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.

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

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

  Toggle Dark Mode
  
Hey there! This is just a title
  
I am just a boring text, existing here solely for the purpose of this demo
  
And I am just another one like the one above me, because two is better than having only one
  I am a link, don't click me!

7

Dark 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 Typography

Tươ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 Color

Chữ 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