Một thông báo ngắn gọn chỉ để ghi chú lại rằng hôm nay chế độ tối tùy chỉnh đã được thêm vào , kèm theo một công cụ chọn chủ đề ở phía bên phải của thanh menu trên cùng.
Chức năng tự động áp dụng (prefers-color-scheme) đã được thay thế bằng cơ chế quản lý dựa trên selector [data-theme="dark"], cho phép hiển thị giao diện tối khi người dùng chọn tùy chọn này trong trình duyệt của họ. Một số trình duyệt, như Opera, có tùy chọn "buộc chế độ tối" hiển thị một phiên bản tối khá đẹp, nhưng có một số lỗi như đảo ngược hình ảnh khiến chúng hiển thị ngược và không cho phép tùy chỉnh bất kỳ thiết lập nào.
Tôi đã quyết định sử dụng HTML và JavaScript kết hợp với các thành phần của GeneratePress cùng CSS trong một đoạn mã dài kèm theo tất cả các chú thích, nhằm có được danh sách đầy đủ các thiết lập đã được điều chỉnh – phòng trường hợp sau này tôi muốn cải thiện hoặc thay đổi chúng – đồng thời đảm bảo kiểm soát hoàn toàn việc tải các kiểu dáng và sự nhất quán về mặt hình ảnh trên toàn bộ trang web.
Dưới đây là những cải tiến chính so với phiên bản tự động:
- Tối ưu hóa hiển thị: Loại bỏ hiện tượng nhấp nháy và xung đột thông qua hệ thống phân cấp CSS thống nhất, đảm bảo chủ đề tối được tải ngay lập tức.
- Tính nhất quán về mặt hình ảnh: Điều chỉnh chính xác màu sắc và bộ lọc trên các thành phần động (GenerateBlocks, Query Loops, tab và accordion) để tránh các vấn đề về khả năng đọc (màu xám trên nền trắng).
- Kiểm soát các yếu tố động: Điều chỉnh chế độ hòa trộn (
mix-blend-mode) và độ mờ trong hình ảnh và menu, đảm bảo các yếu tố như biểu tượng Polylang hoặc các thẻ trên trang phim tài liệu vẫn duy trì độ tương phản chính xác trong mọi điều kiện. - Tối ưu hóa kỹ thuật: Loại bỏ các selector dư thừa và thống nhất các quy tắc CSS nhằm tạo điều kiện thuận lợi cho việc bảo trì trong tương lai mà không ảnh hưởng đến hiệu suất hay chỉ số CLS.
Việc này, mặc dù cũng có thể thực hiện bằng một plugin với những hạn chế nhất định, nhưng tôi đã quyết định thực hiện bằng mã nguồn. Ngoài việc giúp tôi tiết kiệm một plugin, cách làm này còn cho phép tôi kiểm soát chi tiết và tinh chỉnh từng chi tiết nhỏ nhất, đồng thời có thể can thiệp vào những tác động tiềm ẩn mà chúng có thể gây ra đối với tốc độ tải trang.
Nếu ai đó quan tâm đến mã nguồn – dù nó cũng chẳng có gì đặc biệt lắm – thì cứ cho tôi biết, tôi sẽ đăng lên đây. Nếu bạn là người thích khám phá những điều bí ẩn và phát hiện ra điều gì đó cần cải thiện, đừng ngần ngại để lại bình luận hoặc nhấn mạnh vào nút màu vàng “Báo lỗi” mà bạn sẽ thấy ở cuối mỗi bài viết.
Tôi cũng xin nhân dịp này nhắc bạn rằng tôi cung cấp dịch vụ tối ưu hóa WordPress và thỉnh thoảng thực hiện việc di chuyển cũng như tùy chỉnh các mẫu GeneratePress bằng các khối GenerateBlocks.
