Menjadi populer bagi aplikasi untuk memiliki pengaturan yang memungkinkan Anda beralih antara mode gelap dan terang. Mungkin karena popularitas UI gelap, mungkin karena aplikasi secara bertahap menjadi lebih dapat dikonfigurasi.
React context adalah cara mudah untuk berbagi data secara global, tetapi dapat membuat penggunaan kembali komponen menjadi lebih sulit. Sebagai alternatif, Anda dapat membuat komponen tombol mode gelap yang menggunakan kait useEffect dan useState alih-alih konteks. Ini akan mengaktifkan atribut data pada elemen tubuh yang dapat ditargetkan oleh gaya CSS.
Apa yang Anda Butuhkan
Untuk mengikuti tutorial ini, Anda memerlukan yang berikut:
- Versi terbaru dari Node yang diinstal pada mesin Anda.
- Pemahaman dasar tentang React dan Kait reaksi.
- Sebuah proyek Bereaksi pemula. Hanya buat aplikasi React dan Anda siap untuk pergi.
Buat Komponen Tombol
Komponen tombol akan bertanggung jawab untuk mengubah tema dari gelap ke terang. Dalam aplikasi nyata, tombol ini mungkin menjadi bagian dari komponen Navbar.
Di folder src, buat file baru bernama Button.js dan tambahkan kode berikut.
impor { status penggunaan } dari 'reaksi'eksporbawaanfungsiTombol() {
const [tema, settema] = useState("gelap")
konstan handleToggle = () => {
const newTheme = tema "lampu"? "gelap": "lampu"
settema (tema baru)
}
kembali (
<>
<tombol className="temaBtn" onClick={handleToggle}>
{tema "lampu"? <menjangkau>gelap</span>: <menjangkau>lampu</span>}
</button>
</>
)
}
Pertama, impor kait useState() dari React. Anda akan menggunakannya untuk melacak tema saat ini.
Di komponen Button, inisialisasi status menjadi gelap. Fungsi handleToggle() akan menangani fungsi toggling. Ini berjalan setiap kali tombol diklik.
Komponen ini juga mengaktifkan teks tombol saat mengubah tema.
Untuk menampilkan komponen Button, impor ke App.js.
impor Tombol dari './Tombol';
fungsiAplikasi() {
kembali (
<div>
<Tombol/>
</div>
);
}
eksporbawaan Aplikasi;
Buat Gaya CSS
Saat ini, mengklik tombol tidak mengubah UI aplikasi React. Untuk itu, pertama-tama Anda harus membuat gaya CSS untuk mode gelap dan terang.
Di App.css, tambahkan yang berikut ini.
tubuh {
--warna-teks-primer: #131616;
--warna-teks-sekunder: #ff6b00;
--color-bg-primer: #E6EDEE;
--color-bg-sekunder: #7d86881c;
Latar Belakang: var(--warna-bg-primer);
warna: var(--warna-teks-primer);
transisi: Latar Belakang 0.25skemudahan masuk;
}
tubuh[tema-data="lampu"] {
--warna-teks-primer: #131616;
--color-bg-primer: #E6EDEE;
}
tubuh[tema-data="gelap"] {
--warna-teks-primer: #F2F5F7;
--color-bg-primer: #0E141B;
}
Di sini, Anda mendefinisikan gaya elemen tubuh menggunakan atribut data. Ada atribut data tema terang dan atribut data tema gelap. Masing-masing memiliki variabel CSS dengan warna berbeda. Menggunakan atribut data CSS akan memungkinkan Anda untuk mengganti gaya sesuai dengan data. Jika pengguna memilih tema gelap, Anda dapat menyetel atribut data tubuh ke gelap dan UI akan berubah.
Anda juga dapat memodifikasi gaya elemen tombol untuk diubah dengan tema.
.temaBtn {
bantalan: 10 piksel;
warna: var(--warna-teks-primer);
latar belakang: transparan;
berbatasan: 1px padat var(--warna-teks-primer);
kursor: penunjuk;
}
Ubah Komponen Tombol untuk Beralih Gaya
Untuk mengaktifkan gaya yang ditentukan dalam file CSS, Anda perlu menyetel data di elemen tubuh dalam fungsi handleToggle().
Di Button.js, ubah handleToggle() seperti ini:
konstan handleToggle = () => {
const newTheme = tema "lampu"? "gelap": "lampu"
settema (tema baru)
dokumen.body.dataset.theme = tema
}
Jika Anda mengklik tombol, latar belakang harus beralih dari gelap ke terang atau terang ke gelap. Namun, jika Anda menyegarkan halaman, tema akan disetel ulang. Untuk mempertahankan pengaturan tema, simpan preferensi tema di penyimpanan lokal.
Preferensi Pengguna yang Bertahan di Penyimpanan Lokal
Anda harus mengambil preferensi pengguna segera setelah komponen Tombol dirender. Kait useEffect() sangat cocok untuk ini karena berjalan setelah setiap render.
Sebelum mengambil tema dari penyimpanan lokal, Anda harus menyimpannya terlebih dahulu.
Buat fungsi baru bernama storeUserPreference() di Button.js.
konstan storeUserSetPreference = (pref) => {
penyimpanan lokal.setItem("tema", pilihan);
};
Fungsi ini menerima preferensi pengguna sebagai argumen dan menyimpannya sebagai item yang disebut tema.
Anda akan memanggil fungsi ini setiap kali pengguna mengganti tema. Jadi, ubah fungsi handleToggle() agar terlihat seperti ini:
konstan handleToggle = () => {
const newTheme = tema "lampu"? "gelap": "lampu"
settema (tema baru)
storeUserSetPreference (Tema baru)
dokumen.body.dataset.theme = tema
}
Fungsi berikut mengambil tema dari penyimpanan lokal:
konstan getUserSetPreference = () => {
kembalikan localStorage.getItem("tema");
};
Anda akan menggunakannya di kait useEffect sehingga setiap kali komponen dirender, ia mengambil preferensi dari penyimpanan lokal untuk memperbarui tema.
gunakanEfek(() => {
konstan userSetPreference = getUserSetPreference();
if (userSetPreference) {
settheme (userSetPreference)
}
dokumen.body.dataset.theme = tema
}, [tema])
Mendapatkan Preferensi Pengguna Dari Pengaturan Browser
Untuk pengalaman pengguna yang lebih baik, Anda dapat menggunakan lebih suka-warna-skema Fitur media CSS untuk mengatur tema. Ini harus mencerminkan pengaturan sistem pengguna yang dapat mereka kontrol melalui OS atau browser mereka. Pengaturannya bisa terang atau gelap. Dalam aplikasi Anda, Anda perlu memeriksa pengaturan ini segera setelah komponen tombol dimuat. Ini berarti mengimplementasikan fungsionalitas ini di kait useEffect() .
Pertama, buat fungsi yang mengambil preferensi pengguna.
Di Button.js, tambahkan yang berikut ini.
konstan getMediaQueryPreference = () => {
const mediaQuery = "(lebih suka-skema-warna: gelap)";
konstan mql = jendela.matchMedia (mediaQuery);
konstan memilikiPreferensi = jenis mql.matches "boolean";
if (memilikiPreferensi) {
kembali mql.matches? "gelap": "lampu";
}
};
Selanjutnya, ubah kait useEffect() untuk mengambil preferensi kueri media dan gunakan jika tidak ada tema yang disetel di penyimpanan lokal.
gunakanEfek(() => {
konstan userSetPreference = getUserSetPreference();
konstan mediaQueryPreference = getMediaQueryPreference();if (userSetPreference) {
settheme (userSetPreference)
} kalau tidak {
settheme (mediaQueryPreference)
}
dokumen.body.dataset.theme = tema
}, [tema])
Jika Anda memulai ulang aplikasi, tema harus sesuai dengan pengaturan sistem Anda.
Menggunakan React Context untuk Beralih Mode Gelap
Anda dapat menggunakan atribut data, CSS, dan kait React untuk mengganti tema aplikasi React.
Pendekatan lain untuk menangani mode gelap di React adalah dengan menggunakan API konteks. Konteks React memungkinkan Anda untuk berbagi data di seluruh komponen tanpa harus meneruskannya melalui alat peraga. Saat menggunakannya untuk beralih tema, Anda membuat konteks tema yang dapat Anda akses di seluruh aplikasi. Anda kemudian dapat menggunakan nilai tema untuk menerapkan gaya yang cocok.
Meskipun pendekatan ini berhasil, menggunakan atribut data CSS lebih sederhana.