Как добавить темный режим в ReactJS с помощью Tailwind CSS?
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= 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
Выход: