Ứng dụng CSS variables để xây dựng tính năng dark theme

Mấy ngày trước mình có xây dựng tính năng dark theme cho trang TIL của 12bit. Ban đầu hướng tiếp cận của mình khá là truyền thống đó là thay đổi class cho body để override lại CSS theo từng theme kiểu như:

body.dark {
  background-color: #222831;
}

Tuy nhiên, mình đã phát hiện ra cách dùng CSS variables thay cho việv override đó rất hay. Bạn có thể dịnh nghĩa các variable trong body và các phần tử bên trong body có thể kế thừa các variable đó.

Mình có cấu trúc HTML đơn giản như sau:

<body class="dark">
  <h1>Hello World</h1>
</body>

Trong file CSS bạn có thể định nghĩa:

:root {
  --bg: #fff;
  --color: #222831;
  ...
}
.dark {
  --bg: #222831;
  --color: #fff;
  ...
}
body {
  background-color: var(--bg);
}
h1 {
  color: var(--color);
}

Việc còn lại cần làm là bạn dùng JavaScript để thay đổi class cho body mỗi khi người dùng chọn theme.

Demo

Tags:

Sửa lần cuối bởi Duoc Nguyen vào ngày 04-01-2019: xem commit, bài lỗi? sửa ngay
Cảm ơn các bạn đã đóng góp vào bài viết này:
Duoc Nguyen
Thien Nguyen

Đăng ký nhận email từ 12bit.vn

Để không bao giờ bỏ lỡ bất cứ điều gì hay ho.

Bình luận