Chế độ tối là gì?
Chế độ tối là một theme (mẫu giao diện) chuyển bảng màu của ứng dụng từ sáng sang tối. Ngày nay, hầu hết các ứng dụng đều có khả năng chuyển giữa chế độ sáng và tối.
Tại sao nên sử dụng Chế độ tối?
Có một số lý do bạn có thể muốn sử dụng chế độ tối trong ứng dụng React của mình.
1. Cải thiện tuổi thọ pin
Chế độ tối giúp cải thiện thời lượng pin trên thiết bị có màn hình OLED hoặc AMOLED, do các pixel tối hơn cần ít năng lượng hơn để hiển thị.
2. Giảm mỏi mắt
Nếu bạn hay duyệt web hoặc dùng ứng dụng vào ban đêm, chế độ tối có thể giúp giảm mỏi mắt, bởi nó làm giảm lượng ánh sáng trắng hoặc xanh sáng phát ra từ màn hình.
3. Tạo trải nghiệm đắm chìm hơn
Một số người dùng cảm thấy chế độ tối tạo ra trải nghiệm đắm chìm hơn, đặc biệt là với các ứng dụng hoặc trang web có nhiều nội dung, như tin tức hoặc mạng xã hội.
Cách thêm Chế độ tối vào ứng dụng React
Việc thêm chế độ tối vào ứng dụng React khá đơn giản. Bạn chỉ cần làm theo các bước bên dưới.
Trước khi bắt đầu, hãy đảm bảo rằng bạn đã thiết lập ứng dụng React .
1. Sử dụng Hook useState
Trước hết bạn cần tạo một biến trạng thái để theo dõi theme hiện tại của ứng dụng. Để làm điều này, hãy sử dụng hook useState.
import React, { useState } from 'react';
function App() {
const [theme, setTheme] = useState('light');
return (
<div className={`App ${theme}`}>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Đoạn code trên nhập hook useState từ React và tạo một biến trạng thái có tên là theme. Biến theme theo dõi theme hiện tại của ứng dụng mà code đặt thành ‘light’ theo mặc định.
2. Thêm nút chuyển đổi
Tiếp theo, thêm một nút chuyển đổi vào ứng dụng để người dùng có thể chuyển giữa chế độ sáng và tối. Điều này có thể được thực hiện với đoạn code sau:
import React, { useState } from 'react';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Đoạn code ở trên bao gồm một hàm toggleTheme để thay đổi biến trạng thái theme giữa “light” và “dark”, cũng như một nút để gọi hàm toggleTheme khi được nhấp.
3. Sử dụng Hook useEffect
Tiếp theo dùng hook useEffect để tự động cập nhật theme của ứng dụng dựa trên biến trạng thái theme.
import React, { useState, useEffect } from 'react';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Đoạn trên sử dụng hook useEffect để cập nhật className của phần tử document.body dựa trên biến trạng thái theme. Điều này cho phép bạn tự động cập nhật CSS của ứng dụng dựa trên theme.
4. Thêm CSS cho Chế độ tối và sáng
Tiếp theo, thêm CSS cho chế độ tối và sáng bằng cách tạo một tệp có tên ‘darkMode.css’ và thêm CSS sau:
.dark {
background-color: #333;
color: #fff;
}
.light {
background-color: #fff;
color: #333;
}Sau đó, bạn cần nhập tệp CSS vào ứng dụng của mình với đoạn mã sau:
import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;5. Chuyển sang các chế độ khác nhau
Bây giờ bạn có thể chuyển đổi giữa chế độ sáng và tối bằng cách nhấp vào nút chuyển đổi. Để làm điều này, trước hết bạn phải khởi động máy chủ phát triển bằng cách chạy lệnh terminal sau:
npm startSau đó, bạn có thể mở ứng dụng trong trình duyệt và nhấp vào nút chuyển đổi để chuyển giữa chế độ tối và sáng.
Tùy chọn bổ sung cho Chế độ tối trong React
Nếu bạn muốn theme tồn tại sau mỗi lần load lại trang, bạn có thể dùng API localStorage để lưu trữ dữ liệu. Để thực hiện việc này, trước tiên bạn cần thêm đoạn code sau vào ứng dụng:
import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
const [theme, setTheme] = useState(
localStorage.getItem('theme') || 'light'
);
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
localStorage.setItem('theme', theme);
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;Đoạn code trên bao gồm khả năng giữ theme sau khi làm mới trang. Điều này được thực hiện bằng cách dùng API localStorage. Đầu tiên, nó kiểm tra xem có theme nào được lưu trữ trong localStorage hay không.
Nếu có một theme, theme đó được sử dụng. Nếu không, theme ‘light’ được sử dụng. Tiếp theo, code được thêm vào hook useEffect để lưu trữ theme trong localStorage. Điều này đảm bảo rằng chủ đề được duy trì trong các lần trang load lại.
Bài viết này đã hướng dẫn cách thêm chế độ tối vào ứng dụng React bằng cách sử dụng hook useState và useEffect. Nếu có bất kỳ thắc mắc nào, bạn hãy để lại ở dưới phần bình luận để được giải đáp nhé.
Tìm hiểu các khóa học lập trình của FUNiX tại đây:
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/how-to-add-dark-mode-to-a-react-application/
Bình luận (0
)