Mod gelap mudah (dan tema warna berganda!) Dalam React

Panduan ini menunjukkan pelaksanaan mod gelap yang mudah dalam aplikasi React, yang memberi tumpuan kepada kemudahan penggunaan dan pasukan onboarding. Ia mengelakkan strategi CSS yang kompleks dan memanfaatkan pembolehubah CSS dan atribut data untuk penyelesaian yang bersih dan cekap.

Cabaran menguruskan gaya dan melaksanakan mod gelap dalam projek React yang besar sering membawa kepada penyelesaian yang kompleks. Walaupun banyak pilihan wujud, mereka sering bergantung pada metodologi atau rangka kerja CSS tertentu. Pendekatan ini mengutamakan kesederhanaan dan kelajuan, menjadikannya sesuai untuk pasukan yang mempunyai tahap kemahiran yang berbeza -beza.

Kaedah yang lebih baik, menggabungkan pembolehubah CSS dengan cangkuk useLocalStorage , menyediakan sistem peringatan yang mantap dan mesra pengguna. Tutorial ini membimbing anda melalui penubuhan dan menjalankan sistem ini dari awal, mempamerkan keberkesanannya dalam aplikasi React baru. Tambahan pula, ia menunjukkan integrasi dengan react-scoped-css untuk organisasi CSS yang dipertingkatkan.

Persediaan Projek

Panduan ini menganggap kebiasaan asas dengan CSS, JavaScript, dan React. Pastikan anda mempunyai nod dan NPM dipasang. Buat aplikasi React baru menggunakan:

 NPX Create-React-App Easy-React-Themes-Typate TypeScript

(Gantikan easy-react-themes dengan nama projek anda; omit- --template typescript untuk JavaScript). Buka projek dalam editor kod anda (misalnya, kod VS menggunakan cd easy-react-themes; code . ) Dan mulakan pelayan pembangunan ( npm start ). Akhirnya, pasang use-local-storage :

 NPM Saya menggunakan penyimpanan-lokal

Pelaksanaan kod

Kosongkan kandungan App.css . Dalam index.css , tentukan tema anda menggunakan pembolehubah CSS:

 : root {
  -background: putih;
  --Text-Primary: Hitam;
  --Text-Secondary: RoyalBlue;
  -Akal: ungu;
}
[Data-Theme = 'Dark'] {
  -background: hitam;
  --Text-Primary: White;
  --Text-Secondary: Grey;
  -Akal: gelap;
}

Ini menggunakan sifat tersuai CSS (pembolehubah) dan atribut data. Pemilih [data-theme='dark'] mengatasi :root apabila atribut data-theme ditetapkan kepada 'gelap'.

Dalam App.tsx , import useLocalStorage :

 import uselocalstorage dari 'penggunaan-lokal-penyimpanan';

Kemudian, uruskan keadaan tema:

 const defaultDark = window.matchmedia ('(lebih suka-warna-skema: gelap)'). Perlawanan;
const [tema, setTheme] = uselocalStorage ('tema', defaultDark? 'gelap': 'cahaya');

Ini menggunakan useLocalStorage untuk meneruskan pemilihan tema di seluruh sesi, menghormati keutamaan penyemak imbas. Atribut data-theme digunakan pada peringkat teratas<div> :<pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/ * Kandungan aplikasi anda di sini */} &lt;/div&gt;</pre> <p>Gaya komponen anda dalam <code>App.css menggunakan pembolehubah CSS:

 .App {
  Warna: var (-teks utama);
  latar belakang warna: var (-latar belakang);
  / * ... gaya lain ... */
  Peralihan: Semua .5s;
}
butang {
  / * ... gaya butang menggunakan pembolehubah css ... */
  Peralihan: Semua .5s;
}

Ini memastikan kemas kini gaya lancar apabila tema berubah. Tambah butang untuk bertukar -tukar tema.

Memperluaskan permohonan

Tambah komponen baru (contohnya, persegi berwarna) untuk menunjukkan skalabiliti sistem. Import komponen ini ke App.tsx .

Bonus: Mengintegrasikan dengan CSS Scoped React

Untuk organisasi CSS yang lebih baik, mengintegrasikan react-scoped-css . Ikuti arahan pemasangan untuk Craco dan craco-plugin-scoped-css . Namakan semula fail CSS anda (misalnya, app.css ke app.scoped.css ) dan mengemas kini import dengan sewajarnya. Secara kritikal, cuti index.css unscoped untuk memastikan aplikasi global pembolehubah CSS.

Pendekatan ini menawarkan penyelesaian yang mudah, berkesan, dan dikekalkan untuk melaksanakan mod gelap dan pelbagai tema dalam aplikasi React. Repositori dan demo Live GitHub menyediakan sumber selanjutnya.