Как использовать утилиту dark с Tailwindcss и react.js

В этой статье мы узнаем, как использовать утилиту dark: с проектами tailwindcss и react.js простым способом.

Начнем с пустого create-react-app, сначала нужно добавить

в tailwind.config.js в module.exports, после чего добавим class="light"
атрибут в

в теге index.html файла в папке public, после чего добавим атрибут

атрибут в

tag в файле index.html в папке public и еще один шаг, чтобы закончить все, это кнопка переключения для изменения света на темноту и темноты на свет, для этого вы можете добавить этот кусок кода в любое место вашего проекта, например, я добавил его в свой файл App.tsx

function toggleMode() {
    const dd = document.documentElement;
    const body = document.body;

    if (dd.className === "dark") {
      dd.classList.replace("dark", "light");
      body?.classList.replace("bg-slate-800", "bg-gray-100");
      body?.classList.replace("text-white", "text-black");
    } else {
      dd.classList.replace("light", "dark");
      body?.classList.replace("bg-gray-100", "bg-slate-800");
      body?.classList.replace("text-black", "text-white");
    }
  }
Вход в полноэкранный режим Выход из полноэкранного режима

и кнопка, которая вам нужна для управления этим переключением

 <button className="h-7 w-10 rounded" onClick={toggleMode}>
          Theme
 </button>
Вход в полноэкранный режим Выход из полноэкранного режима

если это было недостаточно понятно для вас, нет проблем, вы можете проверить весь код ниже 👇

// tailwind.config.js
module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Вход в полноэкранный режим Выход из полноэкранного режима
// index.html
<!DOCTYPE html>
<html lang="en" class="light">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body class="bg-white text-black">
    <div id="root"></div>
  </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима
// App.tsx

import React from "react";

export default function App() {
  function toggleMode() {
    const dd = document.documentElement;
    const body = document.body;

    if (dd.className === "dark") {
      dd.classList.replace("dark", "light");
      body?.classList.replace("bg-black", "bg-white");
      body?.classList.replace("text-white", "text-black");
    } else {
      dd.classList.replace("light", "dark");
      body?.classList.replace("bg-white", "bg-black");
      body?.classList.replace("text-black", "text-white");
    }
  }
  return (
    <div className="">
      <nav>
        <button className="p-2 rounded bg-slate-500 " onClick={toggleMode}>
          Theme
        </button>
      </nav>
      <article className="dark:bg-green-700">
        <h1>Hey, I'm Mostapha a programmer and web developer</h1>
      </article>
    </div>
  );
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Хотя это не самый лучший способ, но, на мой взгляд, самый простой.
Спасибо, что прочитали, я буду благодарен за ваши отзывы!

Оцените статью
Procodings.ru
Добавить комментарий