Tutorial 2x Đừng để Dark Mode làm "mù mắt" người dùng: Hướng dẫn chuẩn hóa giao diện Sáng/Tối trên XenForo 2.3

[PVS]

Đừng để Dark Mode làm "mù mắt" người dùng: Hướng dẫn chuẩn hóa giao diện Sáng/Tối trên XenForo 2.3

Năm 2025, Dark Mode (Giao diện tối) không còn là một tính năng "có thì vui", mà là tiêu chuẩn bắt buộc. Người dùng mong đợi website tự động chuyển sang màu tối khi trời tối hoặc khi họ cài đặt trên hệ điều hành. XenForo 2.3 đã hỗ trợ tính năng này rất tốt thông qua hệ thống Style Variations, nhưng 90% lỗi giao diện hiện nay lại đến từ... chính Admin.

1. Sai lầm chết người: "Hardcode" mã màu​

Thói quen cũ của nhiều Admin khi chỉnh sửa file extra.less:

.my-custom-box {
    background-color: #ffffff; /* Màu trắng cứng */
    color: #000000; /* Màu đen cứng */
}

Hậu quả: Khi XenForo chuyển sang Dark Mode, nền web biến thành màu đen, nhưng cái hộp .my-custom-box của bạn vẫn giữ nền trắng chói lòa, hoặc tệ hơn là chữ vẫn màu đen chìm nghỉm vào nền tối. Đây là lỗi UX sơ đẳng nhất.

2. Tư duy XenForo 2.3: Sử dụng biến (Variables)​

Trong XF 2.3, một Style duy nhất có thể chứa nhiều biến thể (Light/Dark). Để code của bạn thích nghi được với cả hai, hãy tuyệt đối tránh dùng mã HEX trực tiếp. Hãy dùng hệ thống biến của XenForo (Style Properties).

Cách viết chuẩn:

.my-custom-box {
    background-color: @xf-contentBg; /* Tự động là Trắng (Sáng) hoặc Xám đậm (Tối) */
    color: @xf-textColor; /* Tự động là Đen (Sáng) hoặc Trắng nhạt (Tối) */
    border: 1px solid @xf-borderColor;
}

Khi bạn dùng các biến bắt đầu bằng @xf-, hệ thống sẽ tự động hoán đổi màu sắc phù hợp với chế độ mà người dùng đang chọn.

3. Hiểu về bảng màu (Color Palette)​

Nếu bạn muốn dùng màu sắc riêng mà không phải màu cơ bản? Hãy nhìn vào Style properties > Color palette.
XenForo chia màu thành 5 cấp độ trung tính (Neutral) từ 1 đến 5.

• Ở Light Mode: Palette 1 là sáng nhất (nền), Palette 5 là tối nhất (chữ).
• Ở Dark Mode: Hệ thống tự động đảo ngược: Palette 1 biến thành tối nhất, Palette 5 biến thành sáng nhất.

Mẹo: Muốn tô màu nền phụ? Hãy dùng @xf-paletteColor1. Muốn tô màu chữ tiêu đề? Dùng @xf-paletteColor4 hoặc @xf-paletteColor5. Nó sẽ luôn đúng ở mọi chế độ.

4. Logo riêng cho Dark Mode​

Một logo màu đen sẽ biến mất khi đặt trên nền Dark Mode.
Vào Style properties > Basic options. XenForo 2.3 cho phép bạn upload 2 phiên bản logo:

• Logo Default: Dùng cho nền sáng.
• Logo Alternate: Dùng riêng cho nền tối (Nên là logo màu trắng hoặc sáng).
• 2x logo (Optional): Cho màn hình Retina.

Kết luận​

Tôn trọng đôi mắt người dùng là tôn trọng chính sản phẩm của bạn. Hãy rà soát lại file extra.less ngay hôm nay và thay thế tất cả các mã màu cứng bằng biến chuẩn của XenForo. Một giao diện thích ứng mượt mà (Adaptive UI) chính là dấu hiệu của một diễn đàn chuyên nghiệp.

 

Bài viết chỉ thể hiện quan điểm cá nhân của tác giả và mang tính tham khảo. Chúng tôi không chịu trách nhiệm cho bất kỳ rủi ro nào phát sinh từ việc sử dụng thông tin trong bài viết.