تغییر تم با استفاده از Tailwind CSS تنها در 3 مرحله

در زیر کاپوت

بیایید شروع کنیم، من می خواهم یک تم تیره/سفید به وب سایت خود اضافه کنم چه باید بکنم؟

اینگونه است که داستان به معنای واقعی کلمه با تغییر موضوع در وب سایت شروع می شود

بنابراین بیشتر وب‌سایت‌ها از Tailwind CSS در React استفاده می‌کنند، بنابراین اجازه دهید فقط با آن شروع کنیم.

مرحله 1

نام کلاس تم را به عنصر اصلی برنامه اضافه کنید.

اساساً، عنصر div ریشه برنامه باید دارای نام کلاس به عنوان تیره زمانی که یک تم تیره است و سفید زمانی که یک تم سفید است.

import React from "react";

const App = () => (
 <div classname={`${theme}`}>
  <div> Home </div>
 </div>
);

export default App;

گام 2

موضوع فعلی را در حافظه محلی ذخیره کنید.

همانطور که در مثال کد زیر نشان داده شده است، CSS تم تیره را به اجزای رابط کاربری اضافه کنید.

import React from "react";

const App = () => {

 const theme = window.localstorage.get("theme");
 // fetch theme from localstorage


 return (
  <div classname={`${theme}`}>
   <div> <button className="dark:bg-gray-800 bg-gray-100"></button></div>
    // append the dark theme and work is done 
  </div>
)};

export default App;

مرحله 3

تم تیره را در پیکربندی Tailwind فعال کنید

برو به tailwind.config.js فایل در دایرکتوری ریشه، اگر در دسترس نیست، لطفاً یکی با همین نام ایجاد کنید.

// append the below line or out it after purge key
darkMode: "class", // or 'media' or 'class',

این اساساً به tailwind دستور می دهد تا کلاس CSS موجود در ریشه عنصر را اضافه کند.

اگر مقدار “رسانه” ارائه شده باشد، Tailwind CSS یک تم دستی یا به طور پیش فرض طرح زمینه سفید ارائه می دهد.

نتیجه

این دو مرحله است و شما می توانید موضوع را در برنامه tailwind css تغییر دهید، در واقع در همه برنامه ها.

در زیر مخزن Github به عنوان نمونه کد است، از آن لذت ببرید.

نمونه کد

نسخه ی نمایشی

تا دفعه بعد روز خوبی داشته باشید مردم
شری
iHateReading