Mod gelap bertukar -tukar dengan reaksi dan tema

Artikel ini menunjukkan cara membuat mod gelap bertukar-tukar untuk aplikasi React menggunakan komponen gaya. Ia meliputi menubuhkan projek, mewujudkan tema cahaya dan gelap, melaksanakan fungsi togol, membina komponen togol yang boleh diguna semula, dan memanfaatkan skema warna pilihan pengguna. Mari kita memperbaiki teks untuk kejelasan dan kesimpulan.

Banyak laman web kini menawarkan mod gelap, meningkatkan kebolehbacaan dan mengurangkan ketegangan mata. Tutorial ini membimbing anda melalui membina togol mod gelap untuk aplikasi React anda menggunakan komponen gaya dan cangkuk tersuai.

Menyediakan projek

Mulakan dengan membuat projek React baru menggunakan create-react-app :

 NPX Create-react-app my-app
cd my-app
Benang bermula

Pasang komponen gaya:

 Benang menambah komponen gaya

Buat theme.js untuk pembolehubah tema:

 // tema.js
Eksport const LightTheme = {
  badan: '#e2e2e2',
  Teks: '#363537',
  Toggleborder: '#fff',
  Kecerunan: 'Linear-Gradient ( #39598a, #79d7ed)',
};

Eksport const Darktheme = {
  Badan: '#363537',
  Teks: '#fafafa',
  Toggleborder: '#6B8096',
  Kecerunan: 'Linear-Gradient ( #091236, #1E215D)',
};

Dan global.js untuk gaya asas:

 // global.js
import {createeglobalstyle} dari 'gaya-komponen';

Eksport Const GlobalStyles = Createeglobalstyle`
  *, *:: selepas, *:: sebelum {box-sizing: border-box; }
  badan {
    Align-item: pusat;
    latar belakang: $ {({tema}) => tema.body};
    warna: $ {({tema}) => tema.text};
    Paparan: Flex;
    flex-arah: lajur;
    Justify-Content: Center;
    Ketinggian: 100VH;
    Margin: 0;
    Padding: 0;
    font-family: Blinkmacsystemfont, -apple-System, 'Segoe Ui', Roboto, Helvetica, Arial, Sans-Serif;
    Peralihan: Semua 0.25s linear;
  }
`;

Inisialisasi App.js anda:

 // app.js
Import bertindak balas daripada 'bertindak balas';
import {temaprovider} dari 'gaya-komponen';
import {lighttheme} dari './theme';
import {globalstyles} dari './global';

aplikasi fungsi () {
  kembali (
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1 id="Ini-tema-ringan">Ini tema ringan!</h1>
    </themeprovider>
  );
}

aplikasi lalai eksport;

Melaksanakan togol

Import useState dan tambahkan logik toggling tema:

 // app.js
Import React, {Usestate} dari 'React';
// ... import lain

aplikasi fungsi () {
  const [tema, setTheme] = useState ('light');
  const toggletheme = () => setTheMe (tema === 'cahaya'? 'gelap': 'cahaya');

  const themeMode = tema === 'Light'? Lighttheme: Darktheme;

  kembali (
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">Tema togol</button>
      <h1 id="Ini-tema-cahaya-cahaya-gelap-tema">Ini {tema === 'cahaya'? 'cahaya': 'gelap'} tema!</h1>
    </themeprovider>
  );
}

GlobalStyles secara dinamik memohon warna tema.

Membuat komponen bertukar yang boleh diguna semula

Buat Toggle.js (dan secara opsyen Toggle.styled.js untuk gaya):

 // toggle.js
Import bertindak balas daripada 'bertindak balas';
import proptypes dari 'prop-types';
import yang digayakan dari 'gaya-komponen';
import {ReactComponent sebagai Moonicon} dari './icons/moon.svg'; // Import SVG anda
import {reactcomponent sebagai sunicon} dari './icons/sun.svg';


const toggleContainer = styled.button`
  / * ... gaya dari contoh sebelumnya ... */
`;

const toggle = ({tema, toggletheme}) => {
  const islight = tema === 'light';
  kembali (
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  );
};

Toggle.proptypes = {
  Tema: proptypes.string.isrequired,
  toggletheme: proptypes.func.isrequired,
};

mengeksport togol lalai;

Kemas kini App.js untuk menggunakan komponen Toggle :

 // app.js
import togol dari './toggle'; // Import komponen togol anda

// ... fungsi aplikasi dalam ...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

Ingatlah untuk menggantikan ruang letak dengan laluan ikon SVG sebenar anda.

Mod gelap berterusan dengan cangkuk useDarkMode

Buat useDarkMode.js :

 // usedarkmode.js
import {useeffect, useState} dari 'react';

Eksport const usedarkMode = () => {
  const [tema, setTheme] = useState (localStorage.getItem ('tema') || 'cahaya');
  const [componentMounted, setComponentMounted] = useState (false);

  const setMode = (mod) => {
    localStorage.setItem ('tema', mod);
    setTheme (mod);
  };

  const toggletheme = () => setMode (tema === 'cahaya'? 'gelap': 'cahaya');

  useeffect (() => {
    setComponentMounted (benar);
  }, []);

  kembali [tema, toggletheme, componentmounted];
};

Kemas kini App.js untuk menggunakan cangkuk:

 // app.js
import {usedarkmode} dari './usedarkmode';

// ... fungsi aplikasi dalam ...
const [tema, toggletheme, componentMounted] = usedarkMode ();
const themeMode = tema === 'Light'? Lighttheme: Darktheme;

jika (! ComponentMounted) kembali<div></div> ; // menghalang tema cahaya kilat

// ... sisa pernyataan kembali ...

Ini memastikan tema berterusan di sesi.

Menggunakan skema warna pilihan pengguna (pilihan)

Tingkatkan useDarkMode.js untuk menghormati keutamaan OS pengguna:

 // usedarkmode.js
// ... import lain ...

useeffect (() => {
  const localTheme = localStorage.getItem ('tema');
  const userPrefersDark = window.matchmedia && window.matchmedia ('(lebih suka-warna-skema: gelap)'). Perlawanan;

  jika (localtheme) {
    setTheme (localtheme);
  } else if (userPrefersDark) {
    setMode ('gelap');
  } else {
    setMode ('cahaya');
  }
  setComponentMounted (benar);
}, []);

// ... selebihnya kod ...

Ini menambah sokongan untuk pertanyaan media prefers-color-scheme , mengutamakan tetapan pengguna melalui tingkah laku lalai. Ingatlah untuk menambah kredit untuk ikon yang digunakan. Tanggapan yang disemak ini memberikan pendekatan yang lebih efisien dan cekap untuk melaksanakan togol mod gelap.

Atas ialah kandungan terperinci Mod gelap bertukar -tukar dengan reaksi dan tema. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!