다크 모드 반응 및 Tailwind CSS

Halo Guys, 당신은 당신이 무엇을 할 수 있는지 확인하십시오. 어두운 모드는 무엇입니까? 프로젝트 React는 Tailwind CSS를 시작합니다. 랑숭 사자 키타 물라이.

Silahkan persiapkan 프로젝트 안다. React 및 Tailwind CSS 설치 프로젝트에 대한 추가 정보가 있습니다.

지금은 파일 tailwind.config.js를 다운로드하여 module.exports 코드를 작성하십시오.

module.exports = {
  darkMode: 'class',
  // ...
}

Kode tersebut befungsi untuk mengaktifkan class dark pada Tailwind. Kelas tersebut akan aktif jika pada mode dark. 멘구나칸냐와 한야 펄루 메뉴는 다크: 디이쿠티 덴간 나마 클래스입니다. Anda bisa lihat lebih lanjut pada artikel berikut. Dark Mode - Tailwind CSS.

Selanjutnya kita akan menggunakan package dari NPM untuk membuat ikonnya. Jadi kita tidak perlu repot mempersiapkan ikon sendiri karena pada package tersebut telah disiapkan ikon untuk mode gelap dan terang dan juga terdapat animasi pada transisinya. 당신은 당신의 삶을 살 수 있습니다. React Toggle Dark Mode.

Lakukan installasi dan tunggu hingga selesai.

npm i react-toggle-dark-mode

Pada kasus ini, saya akan menempatkan tombol 토글 다크 모드 pada bagian header. Berikut ini 코드 파일 Header.js saya.

import React from "react";
import Switcher from "./Switcher";

function Header() {
  return (
    <header className="bg-purple-500 text-white font-bold text-3xl dark:bg-slate-800">
      <div className="container flex justify-between p-5 mx-auto items-center uppercase">
        <h1>Example App</h1>
        <Switcher />
      </div>
    </header>
  );
}

export default Header;

Meletakkan 코드를 사용하여 어두운 모드를 전환할 수 있는 파일을 선택하세요. 이 파일은 간결하지만 Switcher.js에 포함되어 있습니다. 간단한 구성 요소 스위처는 간단하지만 헤더는 가져오기만 하면 됩니다. 다른 코드는 Switcher.js입니다.

import React, { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import UseDarkSide from "./UseDarkSide";

function Switcher() {
  const [colorTheme, setTheme] = UseDarkSide();
  const [darkSide, setDarkSide] = useState(
    colorTheme === "light" ? true : false
  );
  const toggleDarkMode = (checked) => {
    setTheme(colorTheme);
    setDarkSide(checked);
  };

  return (
    <DarkModeSwitch checked={darkSide} onChange={toggleDarkMode} size={30} />
  );
}

export default Switcher;

Komponen DarkModeSwitch adalah komponen bawaan dari package yang kita install tadi.

Terakhir kita buat satu buah file untuk menyimpan pilihan tem mode kita pada local storage. Jadi jika kita 새로 고침 atau kita tutup 브라우저, 테마 모드 yang aktif tidak berubah. 파일을 사용하거나 UseDarkSide를 사용하거나 파일을 간단하게 사용할 수 있습니다.

import { useEffect, useState } from "react";

function UseDarkSide() {
  const [theme, setTheme] = useState(localStorage.theme);
  const colorTheme = theme === "dark" ? "light" : "dark";
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove(colorTheme);
    root.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme, colorTheme]);

  return [colorTheme, setTheme];
}

export default UseDarkSide;

어두운 모드를 선택하면 모든 것이 가능합니다.