{tocify} $title = {Mục lục bài viết}

Hầu hết các trang web đều sử dụng nền trắng sáng như một tiêu chuẩn thiết kế. Tuy nhiên, khi duyệt web vào ban đêm, màn hình có thể tạo ra ánh sáng mạnh, làm cho mắt mệt mỏi và gây khó chịu. Tình trạng này không chỉ ảnh hưởng đến mắt mà còn có thể làm suy giảm chất lượng giấc ngủ. Chính vì vậy, việc áp dụng chế độ ban đêm trở nên ngày càng cần thiết.

Chế độ tối là gì?

Chế độ tối (Dark mode) hay chế độ ban đêm (Night mode) là tính năng quan trọng cho phép thay đổi giao diện trang web từ nền sáng sang nền tối, nhằm giảm ánh sáng màn hình và chuyển nền màu sắc sang gam màu tối hơn.

tao-che-do-toi-cho-blogspot-1
Tạo chế độ tối cho blogspot

Lợi ích của chế độ tối

Bảo vệ mắt

Ánh sáng chói từ màn hình có thể tạo ra một loại ánh sáng mạnh, gây mệt mỏi và làm mất cân bằng giữa ánh sáng môi trường và ánh sáng màn hình. 

Khi chúng ta ở trong điều kiện ánh sáng thấp, như vào buổi tối hoặc trong môi trường có đèn yếu, việc chuyển sang chế độ tối giúp giảm đột ngột sự chênh lệch này, tạo ra một môi trường đọc thoải mái hơn, giảm áp lực lên mắt và bảo vệ mắt.

Trải Nghiệm Người Dùng Tốt Hơn vào Ban Đêm

Trong môi trường ánh sáng thấp hoặc khi sử dụng thiết bị vào buổi tối, sự mất cân bằng giữa ánh sáng môi trường và màn hình, tạo ra một trải nghiệm người dùng không thoải mái.

Khi chế độ tối được kích hoạt, màn hình chuyển sang gam màu tối hơn, giảm độ chói lọi và tạo ra một bầu không khí tĩnh lặng hơn. Điều này giúp cung cấp một môi trường đọc và tương tác trực tuyến thoải mái hơn.

Ánh sáng ít hại cho não bộ và hệ thống thần kinh, giúp cơ thể chuẩn bị cho giấc ngủ. Việc chuyển đổi sang chế độ tối trước khi đi ngủ tạo điều kiện thuận lợi cho một giấc ngủ chất lượng.

Tiết Kiệm Năng Lượng

Khi chúng ta kích hoạt chế độ tối, màn hình hiển thị gam màu tối hơn, giảm sự phát ra của ánh sáng màu trắng. Điều này không chỉ làm giảm mức độ ánh sáng phát ra từ màn hình mà còn giảm áp lực lên đèn nền và các thành phần khác của thiết bị.

Trong môi trường ánh sáng thấp, chế độ tối giúp giảm cường độ đèn màn hình, từ đó giảm cả ánh sáng chói lọi và tiêu thụ năng lượng. Khi chúng ta sử dụng chế độ tối vào buổi tối hoặc trong các điều kiện ánh sáng yếu, thiết bị không cần phải hiển thị màu sáng nhiều, điều này góp phần đáng kể vào việc giảm mức tiêu thụ năng lượng của nó.

Đặc biệt, trên các thiết bị di động như điện thoại thông minh hoặc máy tính bảng, việc kích hoạt chế độ tối không chỉ giúp tiết kiệm pin mà còn kéo dài thời lượng sử dụng của thiết bị. Bằng cách giảm sự sáng đèn và áp lực lên các thành phần công nghệ, chế độ tối trở thành một biện pháp hiệu quả trong việc quản lý và tiết kiệm năng lượng

Tăng Sự Linh Hoạt

Chế độ tối không chỉ là một tùy chọn thuận tiện mà còn là một công cụ linh hoạt cho người dùng, mang lại khả năng chuyển đổi giữa chế độ sáng và tối tùy thuộc vào sở thích cá nhân và môi trường sử dụng.

Khả năng linh hoạt này làm cho trải nghiệm sử dụng trở nên cá nhân hóa hơn, cho phép người dùng điều chỉnh giao diện theo cách mà họ cảm thấy thoải mái nhất. Có những người sử dụng thích sự sáng tạo và độ tương phản cao của chế độ sáng trong khi làm việc hoặc duyệt web vào ban ngày. Ngược lại, vào buổi tối hoặc trong môi trường ánh sáng thấp, chế độ tối trở thành một lựa chọn lý tưởng để giảm đôi chút độ chói lọi và tạo ra một không gian thoải mái hơn.

Người dùng có khả năng linh hoạt này giúp họ tương thích với nhiều điều kiện ánh sáng khác nhau, từ môi trường làm việc đến không gian giải trí cá nhân. Điều này không chỉ làm cho môi trường sử dụng trở nên linh hoạt và thích nghi, mà còn tạo điều kiện cho sự sáng tạo và tùy chỉnh theo cá nhân hóa.

Tạo chế độ tối cho blogspot

Đầu tiên, mở trang Blogger – Nhấp vào Chủ đề và nhấp Chỉnh sửa nút HTML
 
tao-che-do-toi-cho-blogspot
Thêm đoạn mã CSS sau vào trong phần <style> trong phần <head>

<style>
  body {
    background-color: #222; /* Màu nền chế độ tối */
    color: #fff; /* Màu chữ chế độ tối */
  }

  /* Thêm các quy tắc CSS tối ưu hóa cho chế độ tối ở đây */

</style>

Thay đổi giá trị màu nền và màu chữ theo ý muốn của bạn

Chèn Đoạn Mã JavaScript để Kích Hoạt Chế Độ Tối ở cuối trang web hoặc trước thẻ </body>:
<script>
  // Chuyển đổi chế độ tối
  function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle("dark-mode");

    // Lưu trạng thái chế độ tối vào Local Storage
    const isDarkMode = body.classList.contains("dark-mode");
    localStorage.setItem("darkMode", isDarkMode);
  }

  // Kiểm tra nếu người dùng đã chọn chế độ tối trước đó
  const savedDarkMode = localStorage.getItem("darkMode");
  if (savedDarkMode === "true") {
    document.body.classList.add("dark-mode");
  }
</script>
Thêm một nút hoặc liên kết để người dùng có thể chuyển đổi giữa chế độ sáng và tối
<button onclick="toggleDarkMode()">Chuyển đổi Chế độ Tối</button>
Hoặc để tự động chuyển đổi dựa trên giờ
<script>
  // Tự động chuyển đổi chế độ tối dựa trên giờ
  const now = new Date();
  const currentHour = now.getHours();

  if (currentHour >= 18 || currentHour < 6) {
    toggleDarkMode();
  }
</script>
Lưu ý rằng mã này sẽ kích hoạt chế độ tối tự động vào lúc 6 giờ chiều và tắt vào lúc 6 giờ sáng. Bạn có thể điều chỉnh giờ theo ý muốn của mình.

Nhớ rằng việc tích hợp chế độ tối có thể phụ thuộc vào theme cụ thể bạn đang sử dụng trong Blogspot. Nếu theme có sẵn chế độ tối, bạn có thể chỉ cần kích hoạt nó từ cài đặt theme thay vì thực hiện các bước trên. Hi vọng với hướng dẫn trên bạn có thể kiểm tra và tạo chế độ tối cho blogspot của mình

Post a Comment

Cửa hàng template Thiết kế blogspot chuyên nghiệp

Để trải nghiệm dịch vụ thiết kế website chuyên nghiệp tại Cửa hàng template

Để trải nghiệm dịch vụ thiết kế website chuyên nghiệp

Facebook
Chat Zalo
037.561.3351