Cách tạo Dark Mode cho Website bằng CSS và JavaScript chi tiết

Dark Mode hay chế độ tối đã trở thành một tính năng quen thuộc trên website và ứng dụng hiện đại. Thay vì chỉ sử dụng nền trắng cùng chữ tối như giao diện truyền thống, Dark Mode chuyển sang nền tối kết hợp với văn bản và thành phần đồ họa sáng hơn. Cách hiển thị này mang lại diện mạo hiện đại, đồng thời cho phép người dùng lựa chọn chế độ phù hợp với môi trường và thói quen sử dụng.

Đối với UX/UI Designer và Web Developer, việc triển khai Dark Mode không đơn giản là đổi màu nền. Một giao diện tối hiệu quả cần có hệ thống màu sắc hợp lý, độ tương phản phù hợp, phân cấp thị giác rõ ràng và cơ chế chuyển đổi thuận tiện. Bài viết dưới đây sẽ giải thích các nguyên tắc quan trọng và hướng dẫn cách tạo website hỗ trợ cả Light Mode và Dark Mode bằng CSS, JavaScript.

1. Chế độ Dark Mode là gì?

Dark Mode là giao diện người dùng sử dụng văn bản, biểu tượng và các yếu tố đồ họa có màu sáng trên nền tối. Có thể hình dung đây là sự thay đổi bảng màu so với giao diện truyền thống vốn sử dụng chữ tối trên nền sáng.

Dark Mode ngày càng phổ biến nhờ sự kết hợp giữa yếu tố thẩm mỹ và tính tiện dụng. Giao diện tối thường tạo cảm giác hiện đại, tối giản và sang trọng, đặc biệt phù hợp với các website công nghệ, nền tảng giải trí, ứng dụng sáng tạo hoặc sản phẩm kỹ thuật số.

Một nguyên nhân khác khiến Dark Mode trở nên phổ biến là khả năng đồng bộ với thiết lập hệ thống. Các hệ điều hành như macOS, Windows, iOS và Android đều hỗ trợ chế độ sáng và tối. Khi website có khả năng nhận biết lựa chọn này, trải nghiệm của người dùng trở nên liền mạch hơn.

Tuy nhiên, Dark Mode không nên được xem là phiên bản “đảo màu” đơn giản của Light Mode. Designer cần xây dựng một hệ thống màu riêng để đảm bảo khả năng đọc, phân cấp nội dung và tính nhất quán của toàn bộ giao diện.

2. Nguyên tắc thiết kế Dark Mode

2.1. Chọn mã màu phù hợp

Một trong những sai lầm phổ biến khi thiết kế Dark Mode là sử dụng màu đen tuyền #000000 làm nền chính và màu trắng #FFFFFF cho toàn bộ văn bản.

Cặp màu này tạo ra độ tương phản rất cao. Mặc dù độ tương phản cao giúp nội dung dễ nhận biết, sự chênh lệch quá lớn giữa hai màu có thể tạo cảm giác chói và gây khó chịu khi sử dụng trong thời gian dài.

Thay vì sử dụng màu đen tuyệt đối, hãy cân nhắc những màu xám rất đậm như #121212. Màu nền này vẫn tạo cảm giác tối nhưng mềm mại hơn.

2.2. Đảm bảo độ tương phản

Trong Dark Mode, khả năng đọc nội dung là yếu tố cần được ưu tiên. Văn bản sáng trên nền tối phải có độ tương phản đủ lớn để người dùng dễ nhận biết nội dung.

Theo tiêu chuẩn WCAG, tỷ lệ tương phản tối thiểu được khuyến nghị cho văn bản thông thường là 4.5:1. Đối với văn bản kích thước lớn, yêu cầu có thể thấp hơn tùy trường hợp.

Do đó, không nên chỉ lựa chọn màu dựa trên cảm quan. Designer nên sử dụng các công cụ kiểm tra contrast để xác định cặp màu có đáp ứng yêu cầu về khả năng tiếp cận hay không.

Ví dụ nếu nền là #121212, không nhất thiết mọi văn bản đều phải sử dụng #FFFFFF. Các cấp độ màu như #F5F5F5, #BDBDBD hoặc những màu trung gian có thể được sử dụng để tạo hệ thống phân cấp nội dung, miễn là chúng vẫn đảm bảo khả năng đọc cần thiết.

2.3. Kiểm soát độ bão hòa

Màu sắc có độ bão hòa cao như xanh neon, hồng đậm hoặc vàng rực thường nổi bật mạnh trên nền tối. Tuy nhiên, nếu sử dụng quá nhiều, chúng có thể khiến giao diện trở nên chói và gây mất tập trung.

Một giải pháp là giảm độ bão hòa của màu thương hiệu khi chuyển sang Dark Mode. Thay vì sử dụng cùng một mã màu cho cả hai chế độ, designer có thể xây dựng phiên bản màu nhẹ nhàng hơn dành riêng cho nền tối.

Điều này đặc biệt quan trọng đối với các thành phần như nút CTA, liên kết, biểu tượng và trạng thái cảnh báo. Màu sắc vẫn cần đủ nổi bật để thể hiện chức năng nhưng không nên trở thành điểm gây nhiễu thị giác.

2.4. Tạo chiều sâu và phân cấp

Trong Light Mode, designer thường sử dụng box-shadow để tạo cảm giác nổi và phân tách các thành phần. Tuy nhiên, trên nền tối, bóng đổ màu đen thường khó nhìn thấy.

Thay vào đó, hãy sử dụng các sắc thái xám khác nhau cho từng lớp giao diện. Nền chính có thể sử dụng #121212, trong khi card hoặc surface sử dụng #1E1E1E. Những thành phần nổi hơn như modal hoặc menu có thể sử dụng màu sáng hơn một chút.

3. Lợi ích của Dark Mode

3.1. Giảm cảm giác chói trong môi trường tối

Một trong những lý do phổ biến để sử dụng Dark Mode là giảm cảm giác chói khi nhìn màn hình trong môi trường ánh sáng yếu.

Trong căn phòng tối, một giao diện có nền trắng sáng có thể tạo cảm giác tương phản mạnh với môi trường xung quanh. Giao diện tối giúp lượng ánh sáng từ những vùng nền giảm xuống, từ đó có thể tạo cảm giác dễ chịu hơn trong một số điều kiện sử dụng.

Tuy nhiên, Dark Mode không phải lúc nào cũng tốt hơn Light Mode. Trong môi trường đủ sáng, chẳng hạn văn phòng ban ngày, chữ tối trên nền sáng thường mang lại khả năng đọc tốt cho nhiều người dùng.

3.2. Có thể tiết kiệm pin trên màn hình OLED

Dark Mode cũng mang lại một lợi ích kỹ thuật đáng chú ý đối với màn hình OLED.

Khác với LCD sử dụng hệ thống đèn nền, màn hình OLED có các pixel tự phát sáng. Khi hiển thị màu đen, pixel có thể được tắt. Vì vậy, trong một số trường hợp, giao diện có nhiều vùng màu đen có thể giúp giảm mức tiêu thụ năng lượng trên thiết bị OLED.

Mức tiết kiệm thực tế phụ thuộc vào thiết bị, độ sáng màn hình, tỷ lệ diện tích hiển thị màu tối và nhiều yếu tố khác. Do đó, không nên xem Dark Mode là giải pháp đảm bảo kéo dài pin trong mọi trường hợp.

3.3. Hỗ trợ khả năng tiếp cận

Dark Mode cũng cần được xem xét dưới góc độ Accessibility. Không phải người dùng nào cũng có trải nghiệm giống nhau với giao diện tối.

Một số người, bao gồm những người mắc loạn thị, có thể cảm thấy văn bản sáng trên nền tối khó đọc hơn hoặc xuất hiện cảm giác quầng sáng quanh ký tự.

Vì vậy, website nên đảm bảo độ tương phản hợp lý và cho phép người dùng chủ động chuyển đổi giữa Light Mode và Dark Mode. Đây là cách tiếp cận tốt hơn so với việc ép tất cả người dùng phải sử dụng một chế độ duy nhất.

4. Tạo Website có Light Mode và Dark Mode

Sau khi hoàn thiện hệ thống màu, bước tiếp theo là triển khai Dark Mode bằng công nghệ web. Một giải pháp hiện đại có thể kết hợp CSS Media Query, CSS Variables và JavaScript.

4.1. Sử dụng prefers-color-scheme

CSS cung cấp media query prefers-color-scheme để website phát hiện chế độ sáng hoặc tối mà người dùng đã thiết lập trên hệ điều hành.

Ưu điểm của phương pháp này là website có thể tự động thích ứng mà không cần JavaScript.

4.2. Quản lý màu bằng CSS Variables

Khi website có nhiều thành phần, việc viết lại từng màu trong media query sẽ khiến CSS khó quản lý. CSS Variables giúp giải quyết vấn đề này.

4.3. Xây dựng nút Toggle

prefers-color-scheme rất tiện lợi nhưng vẫn có một hạn chế: người dùng không thể chủ động thay đổi chế độ ngay trên website nếu cài đặt hệ thống không phù hợp với nhu cầu hiện tại.

Để giải quyết vấn đề này, có thể tạo một nút Toggle bằng HTML, CSS và JavaScript.

HTML:

CSS:

JavaScript:

5. Lưu ý khi triển khai Dark Mode

Dark Mode nên được xem là một hệ thống thiết kế hoàn chỉnh thay vì chỉ là một bộ màu phụ. Khi triển khai, hãy kiểm tra tất cả thành phần của website, bao gồm văn bản, liên kết, button, form, card, modal, icon, hình ảnh và trạng thái lỗi.

Đặc biệt, đừng chỉ kiểm tra giao diện trên màn hình của designer. Hãy thử nghiệm ở nhiều điều kiện ánh sáng và kích thước màn hình khác nhau. Một màu sắc có thể trông phù hợp trên màn hình này nhưng lại quá sáng hoặc quá mờ trên màn hình khác.

Ngoài ra, cần đảm bảo trạng thái Light Mode và Dark Mode đều có cùng cấu trúc nội dung. Người dùng chuyển đổi theme để thay đổi cách hiển thị, không phải để mất thông tin hoặc chức năng.

6. Kết luận

Dark Mode là một tính năng quan trọng trong thiết kế website hiện đại, vừa đáp ứng xu hướng thẩm mỹ vừa trao thêm quyền kiểm soát trải nghiệm cho người dùng. Tuy nhiên, một Dark Mode hiệu quả không chỉ đơn giản là thay nền trắng bằng nền đen.

Designer cần lựa chọn màu nền phù hợp, duy trì độ tương phản, kiểm soát độ bão hòa và xây dựng phân cấp thị giác bằng nhiều lớp màu. Đồng thời, yếu tố Accessibility cũng cần được đặt lên hàng đầu để giao diện có thể phục vụ nhiều nhóm người dùng hơn.

Về mặt kỹ thuật, prefers-color-scheme cho phép website tự động nhận biết thiết lập hệ thống, trong khi CSS Variables giúp quản lý bảng màu tập trung. Khi kết hợp thêm JavaScript và localStorage, người dùng có thể chủ động chuyển đổi giữa Light Mode và Dark Mode cũng như lưu lại lựa chọn của mình. Một Dark Mode được thiết kế và triển khai đúng cách sẽ giúp website trở nên linh hoạt, hiện đại và mang lại trải nghiệm nhất quán hơn trên nhiều thiết bị.

Công Ty TNHH Phần Mềm SADESIGN

Mã số thuế: 0110083217

 

Liên Hệ Zalo

Liên Hệ Hotline

Liên Hệ Facebook