Tidak ada keraguan bahwa mode gelap adalah hal yang populer akhir-akhir ini. Semakin banyak aplikasi yang menawarkan kemampuan untuk beralih ke tema gelap, dan untuk alasan yang bagus. Jika Anda ingin menambahkan mode gelap ke aplikasi React Anda, ada beberapa hal yang perlu Anda lakukan. Dalam artikel ini, Anda akan mempelajari cara menambahkan mode gelap ke aplikasi React menggunakan kait useState dan useEffect.

Apa Itu Mode Gelap?

Mode gelap adalah tema yang mengubah palet warna aplikasi dari terang ke gelap. Saat ini, sebagian besar aplikasi memiliki kemampuan untuk beralih antara mode terang dan gelap. Ini bisa bermanfaat bagi mereka yang lebih suka bekerja di lingkungan yang gelap, atau bagi mereka yang merasa lebih nyaman di mata.

Mengapa Menggunakan Mode Gelap?

Ada sejumlah alasan mengapa Anda mungkin ingin menggunakan mode gelap di aplikasi React Anda. Mari kita lihat beberapa yang paling populer.

1. Tingkatkan Masa Pakai Baterai

Salah satu manfaat dari mode gelap adalah dapat membantu meningkatkan masa pakai baterai pada perangkat dengan layar OLED atau AMOLED. Ini karena piksel yang lebih gelap membutuhkan lebih sedikit daya untuk ditampilkan.

instagram viewer

2. Mengurangi Ketegangan Mata

Jika Anda menjelajahi web atau menggunakan aplikasi di malam hari, mode gelap dapat membantu mengurangi ketegangan mata. Ini karena mengurangi jumlah cahaya putih atau biru terang yang dipancarkan dari layar.

3. Ciptakan Pengalaman yang Lebih Immersive

Beberapa orang menemukan bahwa mode gelap menciptakan pengalaman yang lebih mendalam. Hal ini terutama berlaku saat menggunakan aplikasi atau situs web dengan banyak konten, seperti aplikasi berita atau media sosial.

Cara Menambahkan Mode Gelap ke Aplikasi React

Menambahkan mode gelap ke aplikasi React relatif sederhana. Langkah-langkah yang diperlukan untuk menambahkan mode gelap ke aplikasi React Anda tercantum di bawah ini.

Sebelum kita mulai, Anda harus memastikan bahwa Anda memiliki Pengaturan aplikasi reaksi.

1. Gunakan Kait UseState

Hal pertama yang perlu Anda lakukan adalah membuat variabel status untuk melacak tema aplikasi Anda saat ini. Ini dapat dilakukan dengan menggunakan kait useState. Untuk ini, Anda harus memiliki pemahaman dasar tentang cara bekerja dengan kait useState.

impor Bereaksi, { useState } dari 'reaksi';
fungsiAplikasi() {
 const [tema, setTheme] = useState('lampu');
kembali (
`Aplikasi ${tema}`}>
<h1>Halo Dunia!</h1>
</div>
 );
}
eksporbawaan Aplikasi;

Cuplikan kode mengimpor kait useState dari React dan membuat variabel status yang disebut theme. Variabel tema melacak tema aplikasi saat ini, yang disetel kode ke 'ringan' secara default.

2. Tambahkan Tombol Beralih

Selanjutnya, tambahkan tombol sakelar ke aplikasi sehingga pengguna dapat beralih antara mode terang dan gelap. Ini dapat dilakukan dengan kode berikut:

impor Bereaksi, { useState } dari 'reaksi';
fungsiAplikasi() {
 const [tema, setTheme] = useState('lampu');
konstan toggleTema = () => {
 jika (tema 'lampu') {
 settema('gelap');
 } kalau tidak {
 settema('lampu');
 }
 };
kembali (
`Aplikasi ${tema}`}>
<tombol onClick={toggleTheme}>Alihkan Tema</button>
<h1>Halo Dunia!</h1>
</div>
 );
}
eksporbawaan Aplikasi;

Cuplikan kode di atas menyertakan fungsi toggleTheme untuk mengubah variabel status tema antara 'terang' dan 'gelap', serta tombol untuk memanggil fungsi toggleTheme saat diklik.

3. Gunakan Kait UseEffect

Selanjutnya, gunakan kait useEffect untuk memperbarui tema aplikasi secara dinamis berdasarkan variabel status tema.

impor Bereaksi, { useState, useEffect } dari 'reaksi';
fungsiAplikasi() {
 const [tema, setTheme] = useState('lampu');
konstan toggleTema = () => {
 jika (tema 'lampu') {
 settema('gelap');
 } kalau tidak {
 settema('lampu');
 }
 };
 gunakanEfek(() => {
dokumen.body.className = tema;
 }, [tema]);
kembali (
`Aplikasi ${tema}`}>
<tombol onClick={toggleTheme}>Alihkan Tema</button>
<h1>Halo Dunia!</h1>
</div>
 );
}
eksporbawaan Aplikasi;

Cuplikan kode di atas menggunakan kait useEffect untuk memperbarui className dari elemen document.body berdasarkan variabel status tema. Ini memungkinkan Anda untuk memperbarui CSS aplikasi secara dinamis berdasarkan tema.

4. Menambahkan CSS untuk Mode Gelap dan Terang

Selanjutnya, tambahkan CSS untuk mode gelap dan terang. Anda dapat melakukannya dengan membuat file bernama 'darkMode.css' dan menambahkan CSS berikut:

.gelap {
 warna latar belakang: #333;
 warna: #ff;
}
.lampu {
 warna latar belakang: #ff;
 warna: #333;
}

Setelah itu, Anda perlu mengimpor file CSS ke dalam aplikasi Anda. Ini dapat dilakukan dengan kode berikut:

impor Bereaksi, { useState, useEffect } dari 'reaksi';
impor './darkMode.css';
fungsiAplikasi() {
 const [tema, setTheme] = useState('lampu');
konstan toggleTema = () => {
 jika (tema 'lampu') {
 settema('gelap');
 } kalau tidak {
 settema('lampu');
 }
 };
 gunakanEfek(() => {
dokumen.body.className = tema;
 }, [tema]);
kembali (
`Aplikasi ${tema}`}>
<tombol onClick={toggleTheme}>Alihkan Tema</button>
<h1>Halo Dunia!</h1>
</div>
 );
}
eksporbawaan Aplikasi;

5. Beralih ke Mode Berbeda

Sekarang setelah Anda menambahkan CSS untuk mode gelap dan terang, Anda dapat beralih di antara keduanya dengan mengklik tombol sakelar. Untuk melakukan ini, Anda harus memulai server pengembangan terlebih dahulu. Anda dapat melakukan ini dengan menjalankan perintah terminal berikut:

npm Mulailah

Setelah itu, Anda dapat membuka aplikasi di browser dan mengklik tombol sakelar untuk beralih antara mode gelap dan terang.

Opsi Tambahan untuk Mode Gelap di Bereaksi

Jika Anda ingin tema tetap ada di seluruh halaman yang disegarkan, Anda dapat gunakan localStorage API untuk menyimpan data. Untuk melakukannya, pertama-tama Anda harus menambahkan kode berikut ke aplikasi Anda:

impor Bereaksi, { useState, useEffect } dari 'reaksi';
impor './darkMode.css';
fungsiAplikasi() {
konstan [tema, setTheme] = useState(
 penyimpanan lokal.getItem('tema') || 'lampu'
 );
konstan toggleTema = () => {
 jika (tema 'lampu') {
 settema('gelap');
 } kalau tidak {
 settema('lampu');
 }
 };
 gunakanEfek(() => {
 penyimpanan lokal.setItem('tema', tema);
dokumen.body.className = tema;
 }, [tema]);
kembali (
`Aplikasi ${tema}`}>
<tombol onClick={toggleTheme}>Alihkan Tema</button>
<h1>Halo Dunia!</h1>
</div>
 );
}
eksporbawaan Aplikasi;

Cuplikan kode di atas mencakup kemampuan untuk mempertahankan tema setelah halaman disegarkan. Ini dilakukan dengan menggunakan API Penyimpanan lokal. Pertama, ia memeriksa untuk melihat apakah ada tema yang disimpan di penyimpanan lokal.

Jika ada tema, tema itu yang digunakan. Jika tidak, tema 'ringan' digunakan. Selanjutnya, kode ditambahkan ke hook useEffect untuk menyimpan tema di localStorage. Ini memastikan bahwa tema tetap ada di seluruh halaman yang disegarkan.

Mode Gelap Tidak Berakhir di Bereaksi

Ada banyak cara Anda dapat menambahkan mode gelap ke aplikasi React Anda. Dalam artikel ini, salah satu cara untuk melakukannya menggunakan kait useState dan useEffect ditampilkan. Namun, ada banyak cara lain yang bisa Anda lakukan juga.

Misalnya, Anda bisa menggunakan React Context API untuk membuat penyedia tema. Ini akan memungkinkan Anda untuk membungkus seluruh aplikasi Anda dalam komponen penyedia tema dan mengakses tema di mana saja di aplikasi Anda.

Anda juga dapat mengaktifkan mode gelap di browser Anda dan menggunakan kueri media CSS untuk menerapkan gaya yang berbeda tergantung pada tema browser.