Áp dụng chế độ tối cho Velog

Tôi đã viết lại câu chuyện đưa chế độ tối vào một dịch vụ vốn chưa từng tính đến chế độ tối.

Bài viết được thực hiện với sự kết hợp cả góc nhìn của UX designer lẫn lập trình viên.

• Lựa chọn công nghệ

  • Velog đang sử dụng React và Styled Components

  • ThemeProvider của Styled Components thiết lập theme bằng JS nên bị hạn chế trong việc hiển thị theme hệ thống làm mặc định. Để bám theo theme hệ thống thì cần gọi JS một lần ở phía trình duyệt, vì vậy nếu không cố định theme mặc định thì nó không phù hợp với Velog đang áp dụng SSR.

  • Dùng CSS Variable thì có thể đặt theme hệ thống làm giá trị mặc định

  • Để dùng CSS Variable trong môi trường CSS in JS, màu sắc được quản lý bằng object JS, đồng thời viết thêm hàm tiện ích để tránh sai sót và tận dụng autocomplete của TypeScript

• Cân nhắc về bảng màu cho chế độ tối

  • Màu được xác định dựa trên màu nền, màu chữ, màu viền, màu Primary và màu Destructive

  • Với màu nền, ban đầu tôi sắp xếp theo các mức độ sáng 1 2 3 4, nhưng trong UI thực tế có những lúc không thể ánh xạ 1:1, nên đã điều chỉnh cách quản lý đôi chút để xử lý các trường hợp ngoại lệ

  • Khi chọn màu chữ, điều quan trọng là kiểm tra tỷ lệ tương phản có phù hợp hay không. Có thể dùng WebAIM để xem có đạt WCAG hay không

  • Màu Primary và Destructive vẫn hiển thị tương phản tốt trên nền tối ngay cả khi giữ nguyên màu cũ, nhưng nếu dùng màu Desaturated thì sẽ cho cảm giác hợp với dark theme hơn một chút

• Công việc thay thế màu sắc

  • Những phần có thể thay tự động thì xử lý với sự hỗ trợ của IDE

  • Các màu ngoại lệ còn lại được tự xem trực tiếp rồi đặt sang màu phù hợp

  • Nếu thấy gượng ép khi triển khai bằng các màu đã có từ trước, tôi sẽ bổ sung màu mới vào bảng màu ngay lúc đó để tiếp tục quản lý

  • Trên thực tế, đây là phần tốn nhiều công sức nhất trong toàn bộ công việc

• Tính năng bật/tắt dark theme

  • Dùng CSS transition với rotate và scale trên hai SVG để tạo hiệu ứng chuyển đổi

  • Khi người dùng bật/tắt dark theme, thiết lập của họ sẽ được lưu vào localStorage và cookie

  • localStorage dùng trong CSR, còn cookie dùng trong SSR

Sau khi tự mình áp dụng dark theme một lần, tôi nhận ra rằng việc thêm dark theme vào một UI vốn không được thiết kế có tính đến dark theme là một công việc cực kỳ khó. Từ nay về sau, khi lên kế hoạch tôi sẽ luôn tính đến dark theme trong thiết kế; và khi dùng màu sắc, thay vì đặt tên kiểu gray1, gray2, sẽ thuận tiện hơn về sau nếu đặt tên theo mục đích sử dụng như text1, text2.