Cách tạo chủ đề chế độ tối bằng các biến CSS

Bạn có thể nhận thấy rằng trên nhiều trang web giờ đây bạn có thể chuyển đổi giữa các chủ đề tối và sáng. Điều này thường được thực hiện bằng cách sử dụng các thuộc tính tùy chỉnh CSS (hay còn gọi là các biến CSS ). Trong hướng dẫn này, bạn sẽ thấy cách bạn có thể đạt được điều gì đó tương tự chỉ bằng cách sử dụng CSS và một chút JavaScript. Để tìm hiểu thêm về cách mã này hoạt động, hãy xem nội dung loạt bài của ta về Javascript hoặc HTML .

Bước 1 - Tạo các biến CSS

Sức mạnh của các thuộc tính tùy chỉnh trong CSS thực sự tỏa sáng ở đây bởi vì, không giống như các biến được xác định bằng bộ tiền xử lý CSS, các giá trị này là động; các giá trị của chúng có thể được thay đổi hoặc overrides bất kỳ lúc nào để đáp ứng với đầu vào của user . Khi giá trị của một biến bị thay đổi hoặc bị overrides , tất cả các phần tử sử dụng biến đó sẽ tự động phản ánh sự thay đổi.

Đầu tiên, bạn sẽ phải thực hiện một chút công việc và extract tất cả các màu mà bạn muốn sử dụng trong các thuộc tính tùy chỉnh CSS của bạn . Giả sử bạn đang bắt đầu với các phong cách sau:

style.css

body {   background: white;   color: #555; }  a, a:link {   color: #639A67; } a:hover {   color: #205D67; }

Sau đó, bạn sẽ xác định các thuộc tính tùy chỉnh như sau:

style.css

:root {   --bg: white;   --text-color: #555;   --link-color: #639A67;   --link-hover: #205D67; }

Với điều này, bây giờ bạn có thể thay đổi các luật CSS của bạn thành một cái gì đó giống như sau:

style.css

body {   background: var(--bg);   color: var(--text-color); }  a, a:link {   color: var(--link-color); } a:hover {   color: var(--link-hover); }

Việc áp dụng chủ đề liên quan đến việc thêm một lớp vào phần tử body, vì vậy bạn sẽ xác định màu sắc của chủ đề dưới tên lớp đó. Ở đây ta sẽ gọi lớp học là funky . Chỉ cần đảm bảo xác định màu overrides cho tất cả các màu sẽ thay đổi:

style.css

.funky {   --bg: hotpink;   --text-color: white;   --link-color: #B793E6;   --link-hover: #3532A7; }

Bước 2 - Thêm dự phòng cho các trình duyệt cũ hơn

Hỗ trợ cho các thuộc tính tùy chỉnh CSS là khá tốt , nhưng rất có thể bạn cần bao gồm dự phòng cho user trên các trình duyệt cũ hơn.

Giả sử rằng ta có một phần tử phải có nền gradient tuyến tính với các màu được xác định là thuộc tính tùy chỉnh. Trước tiên, bạn cung cấp các màu được mã hóa cứng và các trình duyệt cũ hơn sẽ bỏ qua version mà họ không hiểu:

style.css

background: linear-gradient(to right, #FFFB85, #5A3662); /* our fallback */ background: linear-gradient(to right, var(--top-grad1), var(--top-grad2));

Bước 3 - Chuyển đổi chủ đề của ta

Ta chỉ cần một lượng JavaScript rất nhỏ để thêm trình xử lý sự kiện trên một phần tử hoạt động như lựa chọn đổi giữa hai chủ đề.

Ở đây nút toggle-theme lớp toggle-theme và ta sử dụng document.querySelector để tham chiếu đến phần tử đó:

app.js

let toggle = document.querySelector('.toggle-theme');  toggle.addEventListener('click', function(e) {   e.preventDefault();    if (document.body.classList.contains('funky')) {     // Turning the theme off:     document.body.classList.remove('funky');     // Reverse logic on the button text, so that users can turn     // the theme back on:     toggle.innerText = 'Turn theme on';   } else {     document.body.classList.add('funky');     toggle.innerText = 'Turn theme off';   } });

Đây là mẹo để chuyển đổi giữa hai chủ đề. Ta có thể làm tốt hơn và đồng thời thêm / xóa một mục vào localStorage để chủ đề của ta được áp dụng tự động khi tải trang:

app.js

let toggle = document.querySelector('.toggle-theme');  // Turn the theme off if the 'funky' key exists in localStorage if (localStorage.getItem('funky')) {   document.body.classList.add('funky');   toggle.innerText = 'Turn theme off'; }  toggle.addEventListener('click', function(e) {   e.preventDefault();    if (document.body.classList.contains('funky')) {     document.body.classList.remove('funky');     toggle.innerText = 'Turn theme on';     localStorage.removeItem('funky');   } else {     document.body.classList.add('funky');     toggle.innerText = 'Turn theme off';     localStorage.setItem('funky', true);   } });

Bạn có thể sử dụng đoạn mã nhỏ này và các biến CSS để tạo các trang web theo chủ đề như thế này, với chế độ tối, chế độ sáng và hơn thế nữa.

Kết luận

Trong hướng dẫn này, bạn đã tạo một trang web theo chủ đề có chế độ tối và sáng. Để tìm hiểu thêm về cách mã này hoạt động, hãy xem nội dung loạt bài của ta về Javascript hoặc HTML .

Tags:

Các tin liên quan

Cách thay đổi độ mờ của ảnh nền CSS
2020-09-21
Cách xác định phông chữ tùy chỉnh trong CSS với @ font-face và font-display
2020-09-16
Cách tạo ảnh động với Animate.css
2020-09-16
6 tiện ích mở rộng CSS tuyệt vời cho VS Code
2020-09-15
Màu mã hex CSS với giá trị alpha
2020-09-09
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ
2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03