Cách thêm chủ đề chế độ tối vào ứng dụng React của bạn

Không còn nghi ngờ gì nữa, chế độ tối đang là cơn thịnh nộ những ngày này. Ngày càng có nhiều ứng dụng cung cấp khả năng chuyển sang chủ đề tối và vì lý do chính đáng. Nếu bạn đang tìm cách thêm chế độ tối vào ứng dụng React của mình, có một số điều bạn cần làm. Trong bài viết này, bạn sẽ học cách thêm chế độ tối vào ứng dụng React bằng cách sử dụng hook useState và useEffect.

Chế độ tối là gì?

Chế độ tối là một chủ đề chuyển đổi bảng màu của một ứ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 đổi giữa chế độ sáng và tối. Điều này có thể hữu ích cho những người thích làm việc trong môi trường tối hoặc những người cảm thấy dễ nhìn hơn.

Tại sao sử dụng Chế độ tối?

Có một số lý do tại sao bạn có thể muốn sử dụng chế độ tối trong ứng dụng React của mình. Chúng ta hãy xem xét một vài trong số những cái phổ biến nhất.

1. Cải thiện tuổi thọ pin

Một trong những lợi ích của chế độ tối là nó có thể giúp cải thiện thời lượng pin trên các thiết bị có màn hình OLED hoặc AMOLED. Điều này là do các pixel tối hơn cần ít năng lượng hơn để hiển thị.

2. Giảm căng thẳng mắt

Nếu bạn thấy mình đang duyệt web hoặc sử dụng ứng dụng vào ban đêm, chế độ tối có thể giúp giảm mỏi mắt. Điều này là do nó làm giảm lượng ánh sáng trắng hoặc xanh lam 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 nhận thấy rằng chế độ tối tạo ra trải nghiệm nhập vai hơn. Điều này có thể đặc biệt đúng khi sử dụng các ứng dụng hoặc trang web có nhiều nội dung, chẳng hạn như ứng dụng tin tức hoặc phương tiện truyền thông xã hội.

Cách thêm Chế độ tối vào ứng dụng React

Thêm chế độ tối vào ứng dụng React tương đối đơn giản. Các bước cần thiết để thêm chế độ tối vào ứng dụng React của bạn được liệt kê bên dưới.

Trước khi bắt đầu, bạn cần đảm bảo rằng mình đã thiết lập ứng dụng React.

1. Sử dụng useState Hook

Điều đầu tiên bạn cần làm là tạo một biến trạng thái để theo dõi chủ đề hiện tại của ứng dụng của bạn. Điều này có thể được thực hiện bằng hook useState. Đối với điều này, bạn nên có hiểu biết cơ bản về cách làm việc với useState hook.

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 mã nhập hook useState từ React và tạo một biến trạng thái được gọi là theme. Biến chủ đề theo dõi chủ đề hiện tại của ứng dụng, mà mã đặt thành ‘sáng’ theo mặc định.

2. Thêm nút chuyển đổi

Tiếp theo, thêm nút bật tắt vào ứng dụng để người dùng chuyển đổi giữa chế độ sáng và tối. Điều này có thể được thực hiện với mã 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 mã trên bao gồm một hàm toggleTheme để thay đổi biến trạng thái chủ đề giữa ‘sáng’ và ‘tối’, cũng như một nút để gọi hàm toggleTheme khi được nhấp vào.

3. Sử dụng useEffect Hook

Tiếp theo, sử dụng hook useEffect để cập nhật động chủ đề của ứng dụng dựa trên biến trạng thái chủ đề.

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 mã ở 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 chủ đề. Điều này cho phép bạn cập nhật động CSS của ứng dụng dựa trên chủ đề.

4. Thêm CSS cho Chế độ tối và sáng

Tiếp theo, thêm CSS cho các chế độ tối và sáng. Bạn có thể thực hiện việc này bằng cách tạo một tệp có tên ‘darkMode.css’ và thêm CSS sau:

.dark {
background-color: 
color: 
}
.light {
background-color: 
color: 
}

Sau đó, bạn sẽ cần nhập tệp CSS vào ứng dụng của mình. Điều này có thể được thực hiện với 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 đã thêm CSS cho các chế độ tối và sáng, bạn có thể chuyển đổi giữa chúng bằng cách nhấp vào nút bật tắt. Để làm điều này, trước tiên bạn phải khởi động máy chủ phát triển. Bạn có thể thực hiện việc này bằng cách chạy lệnh đầu cuối sau:

npm start

Sau đó, bạn có thể mở ứng dụng trong trình duyệt và nhấp vào nút bật tắt để chuyển đổi giữa chế độ tối và sáng.

Các tùy chọn bổ sung cho Chế độ tối trong React

Nếu bạn muốn chủ đề tồn tại qua các lần làm mới trang, bạn có thể sử 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 mã sau vào ứng dụng của mình:

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 mã ở trên bao gồm khả năng giữ chủ đề sau khi làm mới trang. Điều này được thực hiện bằng cách sử dụng API localStorage. Đầu tiên, nó kiểm tra xem có chủ đề được lưu trữ trong localStorage hay không.

Nếu có một chủ đề, chủ đề đó được sử dụng. Nếu không, chủ đề ‘ánh sáng’ sẽ được sử dụng. Tiếp theo, mã được thêm vào hook useEffect để lưu chủ đề trong localStorage. Điều này đảm bảo rằng chủ đề vẫn tồn tại qua các lần làm mới trang.

Chế độ tối không kết thúc trong React

Có nhiều cách để bạn có thể thêm chế độ tối vào ứng dụng React của mình. Trong bài viết này, sẽ trình bày một cách thực hiện bằng cách sử dụng hook useState và useEffect. Tuy nhiên, có nhiều cách khác mà bạn có thể thực hiện.

Ví dụ: bạn có thể sử dụng API ngữ cảnh React để tạo nhà cung cấp chủ đề. Điều này sẽ cho phép bạn gói toàn bộ ứng dụng của mình trong một thành phần của nhà cung cấp chủ đề và truy cập chủ đề ở bất kỳ đâu trong ứng dụng của bạn.

Bạn cũng có thể bật chế độ tối trên trình duyệt của mình và sử dụng truy vấn phương tiện CSS để áp dụng các kiểu khác nhau tùy thuộc vào chủ đề của trình duyệt.