Hướng dẫn tích hợp dark mode cho website WordPress

Hướng dẫn tích hợp dark mode/ night mode cho website WordPress một cách đơn giản.

Như các bạn đã biết, dark mode hay night mode (giao diện tối màu, giao diện ban đêm) đã trở thành xu hướng thiết kế trong vài năm trở lại đây. Tác dụng của nó là làm giảm cường độ ánh sáng phát ra từ màn hình máy tính, điện thoại… giúp người xem đỡ chói mắt, nhức mắt vào ban đêm. Các hệ điều hành và phần mềm phổ biến đều đã được trang bị dark mode. Website cũng không thể đứng ngoài cuộc chơi đó. Nhiều website lớn như YouTube, Facebook… đã được trang bị tính năng này. Nếu bạn cũng đang muốn làm điều tương tự cho website WordPress của mình thì ngay sau đây là hướng dẫn chi tiết.

Tham khảo thêm:

• Lựa chọn màu sắc chuẩn trong thiết kế website
• Thiết kế giao diện tối ưu cho việc đăng ký Google AdSense

Tích hợp dark mode cho WordPress

1. Đầu tiên, các bạn sẽ cần phải cài đặt và kích hoạt plugin WP Dark Mode (link download).

2. Tiếp theo, truy cập Settings => WP Dark Mode. Tại đây, các bạn sẽ cần chú ý đến 3 tab là General Settings, Display Settings và Style Settings.

General Settings

Bao gồm 4 tùy chọn chính:

• Enable Frontend Darkmode: tích hợp dark mode cho giao diện website.
• Enable Backend Darkmode: tích hợp dark mode cho giao diện quản trị WordPress.
• Show Floating Switch: hiển thị nút kích hoạt dark mode trượt theo màn hình (mặc định nằm ở góc dưới, bên phải giao diện) để cho phép khách truy cập có thể tắt bật một cách dễ dàng.
• Enable OS aware Dark Mode: đồng bộ với thiết lập của thiết bị truy cập. Ví dụ như điện thoại của bạn đang kích hoạt dark mode thì khi truy cập, website cũng sẽ tự động kích hoạt dark mode.

Sau khi thiết lập, click vào nút Save Settings để lưu lại.

Về cơ bản, chỉ cần thiết lập 4 mục này là bạn đã hoàn tất việc tích hợp dark mode cho website của mình. Nó sẽ trông như thế này:

• Demo dark mode trên giao diện website:

• Demo dark mode trong giao diện quản trị WordPress:

Display Settings

Cho phép bạn tùy chỉnh nút kích hoạt dark mode trên giao diện website.

Trong đó:

• Floating Switch Style: chọn phong cách thiết kế cho nút bấm. Đối với phiên bản miễn phí, các bạn chỉ có 2 tùy chọn mà thôi.
• Floating Switch Position: chọn vị trí hiển thị cho nút bấm (góc dưới bên phải hoặc góc dưới bên trái).

Những tính năng còn lại chỉ dành riêng cho phiên bản trả phí. Sau khi thiết lập, click vào nút Save Settings để lưu lại.

Style Settings

Cho phép bạn tùy chọn màu sắc cho dark mode. Tuy nhiên, đối với phiên bản miễn phí, các bạn chỉ có 2 bộ màu sắc để chọn mà thôi.

Sau khi thiết lập, click vào nút Save Settings để lưu lại.

Những tab khác

• Advanced Settings: cho phép bạn hẹn giờ tắt/ bật dark mode. Tính năng này chỉ có trên phiên bản trả phí.
• Image Settings: hỗ trợ dark mode cho hình ảnh tối màu. Tính năng này chỉ có trên phiên bản trả phí.
• Custom CSS: tùy chỉnh giao diện dark mode bằng CSS. Tính năng này chỉ có trên phiên bản trả phí.
• Gutenberg Block: hướng dẫn tích hợp nút tắt/ bật dark mode bằng Gutenberg.
• Elementor Widget: hướng dẫn tích hợp nút tắt/ bật dark mode bằng Elementor.
• Shortcodes: hướng dẫn tích hợp nút tắt/ bật dark mode bằng shortcode. Tính năng này chỉ có trên phiên bản trả phí.
• Switch Widget: hướng dẫn tích hợp nút tắt/ bật dark mode bằng widget. Tính năng này chỉ có trên phiên bản trả phí.

Kết luận

Như vậy là tôi đã vừa hướng dẫn cho các bạn tích hợp dark mode vào website WordPress một cách dễ dàng bằng plugin WP Dark Mode rồi phải không nào? Với nhu cầu thông thường, các bạn chỉ cần phiên bản miễn phí là đủ. Phiên bản trả phí của plugin này cho phép bạn tùy biến nhiều thứ hơn nhưng mức giá lại khá đắt.

Còn bạn thì sao? Bạn đã tích hợp dark mode cho website của mình hay chưa? Bạn đã sử dụng phương pháp nào để làm điều đó? Hãy chia sẻ với chúng tôi ý kiến của bạn về dark mode thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)