Как добавить темный режим в ReactJS с помощью Tailwind CSS?

Опубликовано: 18 Февраля, 2023

Tailwind CSS — это CSS-фреймворк, который помогает быстро создавать пользовательские интерфейсы. Это низкоуровневый CSS-фреймворк с широкими возможностями настройки, который дает вам все необходимые строительные блоки. Tailwind CSS создает небольшие утилиты с определенным набором параметров, что позволяет легко интегрировать существующие классы непосредственно в код HTML.

В этой статье мы увидим, как добавить темный режим в проект ReactJS с помощью Tailwind CSS. Темный режим очень популярен в настоящее время и становится все более распространенным для разработки темной версии нашего веб-сайта в соответствии с веб-дизайном по умолчанию. Чтобы ваш веб-сайт использовал темный режим, Tailwind предоставляет «темный» вариант, который помогает по-разному стилизовать наш веб-сайт, когда включен темный режим.

Шаг для создания приложения React и установки модуля:

Шаг 1: Создайте приложение React с помощью следующей команды:

npm create-react-app appname

Шаг 2: После создания папки проекта, то есть имени папки, перейдите к ней с помощью следующей команды:

cd foldername

Шаг 3. После создания приложения React.js установите Tailwind CSS с помощью следующей команды.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Шаг 4: Настройте пути к шаблонам и добавьте класс в темном режиме в файл tailwind.config.js с помощью следующей команды:

module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
      ],
      darkMode: "class",
}

Шаг 5: Установите модуль анимации значка Солнца/Луны для перехода с помощью React.

npm i react-toggle-dark-mode

Структура проекта: Это будет выглядеть следующим образом.

Синтаксис: чтобы добавить темный режим в реакцию с использованием попутного ветра, нам просто нужно добавить префикс dark: к классам CSS. См. приведенный ниже синтаксис для лучшего понимания.

<div className="bg-gray-100 dark:bg-white">
    <h1 className="text-black dark:text-white">
        GeeksforGeeks
    </h1>
</div>

Пример: пример ниже демонстрирует темный режим в React.js с использованием CSS попутного ветра. В данном примере мы разработали базовый компонент карты для реализации поддержки темного режима. Здесь, когда срабатывает компонент переключателя, вся веб-страница меняется на темную/светлую тему. Кроме того, если пользователь обновляет страницу, пользователь продолжает видеть последние измененные настройки темы, поскольку мы использовали локальное хранилище для сохранения настроек браузера пользователя.

Шаги по добавлению кнопки переключения для переключения темной/светлой темы:

Шаг 1: Создайте хук, чтобы поймать изменения темы. Он также сохраняет последний предпочтительный режим пользователя в браузере с помощью localStorage, и всякий раз, когда пользователь снова посещает веб-сайт, он может продолжить свой последний предпочтительный режим.

использовать файл DarkSide.js

Javascript

import { useState, useEffect } from "react";
  
export default 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]
}

Шаг 2: Создайте событие (компонент Switcher), чтобы активировать хук смены темы.

Файл Switcher.js

Javascript

import { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import useDarkSide from "../hooks/useDarkSide";
  
export default function Switcher() {
    const [colorTheme, setTheme] = useDarkSide();
    const [darkSide, setDarkSide] = useState(
        colorTheme === "light" ? true : false
    );
  
    const toggleDarkMode = (checked) => {
        setTheme(colorTheme);
        setDarkSide(checked);
    };
  
    return (
        <>
            <DarkModeSwitch
                style={{ marginBottom: "2rem" }}
                checked={darkSide}
                onChange={toggleDarkMode}
                size={30}
            />
        </>
    );
}

Шаг 3: Добавьте файл компонента Switcher в файл App.js.

App.js

Javascript

import React from "react";
import Switcher from "./Components/Switcher";
  
function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h1 className="text-green text-3xl font-bold">
                    GeeksforGeeks
                </h1>
                <h3 className="text-black dark:text-white text-2xl">
                    Adding Dark Mode in ReactJS using Tailwind CSS
                </h3>
            </div>
            <center>
                <Switcher />
                <div class="w-56 overflow-hidden bg-white
                rounded-lg border border-gray-200 
                shadow-md dark:bg-gray-800 dark:border-gray-700">
                    <img
                        class="rounded-t-lg"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                        alt="gfg"
                    />
                    <div class="p-5">
                        <a href="##">
                            <h5 class="mb-2 text-2xl 
                            font-bold tracking-tight 
                            text-gray-900 dark:text-white">
                                GeeksforGeeks
                            </h5>
                        </a>
                        <p class="mb-3 font-normal text-gray-700 
                            dark:text-gray-400">
                            Best coding website for
                            developers in the world.
                        </p>
                    </div>
                </div>
            </center>
        </div>
    );
}
  
export default App;

Шаг для запуска приложения:

npm start

Выход:

Technical Scripter CSS

Как добавить темный режим в ReactJS с помощью Tailwind CSS?

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ