آموزش حالت دارک مود در ری اکت با یک تکنیک ساده !
حالت دارک مود یک ویژگی جذاب و ضروری هست که با اضافه کردنش به وبسایت خودمون، کمک میکنیم کاربر تجربه بهتری در اپیکیشن ما داشته باشه. حالت دارک مود در ری اکت کمک میکنه کاربر خیلی UX بهتری رو تجربه کنه و چشم کاربر کمتر اذیت بشه!
چند سالی هست که اپیکیشن های مدرن و امروزی، همگی حالت Dark Mode رو اضافه کردن. شاید پیش خودمون فکر کنیم که پیاده سازی حالت دارک مود در ری اکت خیلی خیلی سخت و پیچیده یا زمانبره، اما اینطور نیست!
تو این مقاله میخوایم به کمک یک تکنیک خیلی خیلی ساده حالت دارک مود رو به اپیکیشن ری اکتی خودمون اضافه کنیم.
پس اگه قصد پیاده سازی حالت دارک مود در React دارید با فِرانت اندی همراه باشید 🙂
حالت دارک مود در ری اکت چیست ؟
حالت دارک مود، کمک میکنه که اپیکیشن ما یعنی تمامی صفحات و کامپوننت ها از حالت روشن ( light ) به حالت تیره ( Dark ) یا بلعکس تغییر حالت پیدا کنن.
وجود حالت دارک مود در وبسایت یا اپیکیشن کمک میکنه که user تجربه فوق العاده بهتر و راحت تری رو داشته باشه.
استفاده از Tailwind CSS برای پیاده سازی حالت دارک مود
کتابخانه Tailwind یک فریمورک CSS به حساب میاد و شامل مجموعه بزرگی از class های از پیش ساخته شده میشه . همچنین ویژگی های جذابی به ما ارائه میده که یکیشون حالت دارک مود هست.
ما تو این آموزش از Tailwind استفاده میکنیم پس اگه با این Css Freamwork آشنا نیستید پیشنهاد میکنم مقاله Tailwind CSS چیست رو مطالعه کنید.
آموزش حالت دارک مود در React با یک تکنیک ساده !
ما نمیخوایم خیلی قضیه رو بپیچونیم و سختش کنیم 🙂 بیاید با یک تکنیک ساده این ویژگی جذاب رو به اپیکیشن ری اکتی خودمون اضافه کنیم.
قبل از هرچیز باید Tailwind رو کانفیگ کنیم تا امکان استفاده ازش رو داشته باشیم.
قدم اول
تو قدم اول به کمک دستور زیر میتونیم Tailwind CSS رو نصب کنیم ( دستور رو در ترمینال vsCode وارد کنید ) :
npm install tailwindcss
قدم دوم
تو قدم دوم باید فایل tailwind.config.js رو بسازیم، البته ما اینکار رو بصورت دستی انجام نمیدیم. کافیه دستور زیر رو داخل ترمینال وارد کنیم تا بصورت خودکار این فایل برای ما ایجاد بشه :
npx tailwindcss init
بعد چند لحظه فایل tailwind.config.js برای ما ساخته میشه. حالا کافیه وارد این فایل بشیم و path فایل های خودمون رو داخلش قرار بدیم :
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
تو خط 2 تیکه کد بالا، ما از ویژگی class برای تعیین حالت دارک مود استفاده کردیم. ( بعدا راجب این موضوع صحبت میکنیم )
تو خط 3 من پوشه src و فایل با فرمت های js,jsx,ts,tsx رو به Tailwind معرفی کردم. اگه شما پوشه دیگه ای دارید حتما بهش معرفی کنید ( مثلا اگه از next.js استفاده میکنیم باید پوشه های دیگه ای هم بهش معرفی کنیم )
قدم سوم
تو قدم سوم باید وارد فایل index.css ( یا یک فایل css دیگه ) بشیم و 3 خط زیر رو بهش اضافه کنیم :
/*/_ ./src/index.css _/ */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
فایل بالا، فایل index.css هست.
فراموش نکنیم که باید فایل بالارو داخل index.js فراخوانی کنیم :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
خب عالیه 🙂
تا اینجای کار تونستیم Tailwind CSS رو نصب و کانفیگ کنیم تا امکان استفاده ازش رو داشته باشیم .
قدم چهارم
ما میخوایم حالت دارک مود رو برای یک کامپوننت Card ایجاد کنیم اما شما میتونید همین کار رو برای هر کامپوننت یا کل اپیکیشن انجام بدید.
من قصد دارم یک Card بسازم که بالای این کارد یک Switch برای جابجایی بین حالت دارک مود و لایت مود وجود داشته باشه.
کاربر باید بتونه با تغییر این Switch بین حالت تیره و روشن جابجا بشه.
من برای اینکه بتونم حالت دارک مود در ری اکت رو پیاده سازی کنم میخوام یک Custom Hook ( کاستوم هوک ) بسازم.
میخوام این Custom Hook وظیفه مدیریت حالت دارک / لایت اپیکیشن من رو بر عهده داشته باشه.
اگه با Custom Hook آشنا نیستید پیشنهاد میکنم مقاله Custom Hook در ری اکت رو مطالعه کنید.
پس یک فایل با نام useDarkSide.js میسازم و کد زیر رو داخلش قرار میدم :
import { useEffect, useState } 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);
// save theme to local storage
localStorage.setItem('theme', theme);
}, [theme, colorTheme]);
return [colorTheme, setTheme];
}
کاستوم هوکی که ساختیم خیلی خیلی کاربردیه!
این Custom Hook داخل خودش یک State داره که حالت اپیکیشن ( دارک یا لایت ) رو ذخیره میکنه. برای اینکه این State از بین نره ( با رفرش شدن صفحه ) آخرین وضعیت حالت دارک مود رو داخل LocalStorage ذخیره میکنه.
به خط 8 دقت کنید ..
تو این خط ما div والد اپیکیشن خودمون رو گرفتیم و یک class بهش اضافه کردیم. ( این class مشخص میکنه که اپیکیشن ما حالت dark داشته باشه یا light )
همچنین تو خط 14، وابستگی های هوک useEffect رو مشخص کردیم تا درصورت تغییر مقادیر theme یا colorTheme، تابع داخل useEffect مجدد اجرا بشه تا حالت اپیکیشن ما تغییر کنه.
تقریبا نصف پروسه دارک مود در ریکت تو کاستوم هوک بالا خلاصه میشه پس لازمه که خوب درکش کنیم.
در نهایت تو خط 16 ما 2 مقدار return کردیم :
مقدار colorTheme مقدار فعلی حالت دارک مود رو برمیگردونه ( یا light یا dark )
مقدار setTheme برای تغییر حالت دارک مود کاربرد داره.
قدم پنجم
تو قدم پنجم باید یک کامپوننت Switcher برای جابجایی بین حالت دارک مود و لایت مود بسازیم.
کاربر های ما به کمک این Switcher میتونن حالت اپیکیشن رو تغییر بدن. این کامپوننت معمولا توی هدر وبسایت ها نمایش داده میشه.
برای اینکار من یک فایل با نام Switcher.js میسازم و کد زیر رو داخلش قرار میدم :
import React, { useState } from 'react';
import useDarkSide from './Hook/useDarkSide';
import { DarkModeSwitch } from 'react-toggle-dark-mode';
export default function Switcher() {
const [colorTheme, setTheme] = useDarkSide();
const [darkSide, setDarkSide] = useState(colorTheme === 'light' ? true : false);
const toggleDarkMode = checked => {
setTheme(colorTheme);
setDarkSide(checked);
};
return (
<>
>
);
}
تو خط 2 ما از هوک useDarkSide استفاده کردیم که تو قدم قبل خودمون ساخته بودیمش.
همچنین تو خط 3 از یک هوک با نام DarkModeSwitch استفاده کردیم که یک پکیج برای سوئیچ کردن بین حالت دارک مود و لایت مود هست.
ما میتونیم خودمون هم این سوئیچ رو بسازیم اما این کامپوننت هم گزینه بدی نیست! همچنین کمک میکنه تو زمان صرفه جویی کنیم و تو مدت زمان خیلی کمتری حالت دارک مود رو به اپیکیشن خودمون اضافه کنیم.
برای نصب این پکیج ( react-toggle-dark-mode ) کافیه از دستور زیر استفاده کنیم :
npm i react-toggle-dark-mode
کامپوننت DarkModeSwitch که تو خط 17 ازش استفاده کردیم، سه Props اصلی از ما میگیره.
مقدار checked مقدار فعلی این سوئیچ هست. این مقدار یک boolean هست و مشخص میکنه که مقدار فعلی این سوئیچ چیست.
مقدار onChange زمانی اجرا میشه که کاربر سوئیچ رو از حالت دارک به حالت لایت یا بلعکس تغییر بده.
در نهایت size، سایز کامپوننت سوئیچ رو مشخص میکنه.
اگه با کامپوننت Switch کار کرده باشیم، با این مقادیر کاملا آشنا هستیم.
من برای ذخیره کردن حالت دارک مود / لایت مود یک State ساختم ( در خط 7 )
هر زمان این سوئیچ ما تغییر پیدا کنه، تابع toggleDarkMode اجرا میشه و مقدار جدید سوئیچ ( dark یا light ) داخل state و کاستوم هوک ذخیره میشه.
تبریک میگم چون به همین سادگی تونستیم حالت دارک مود در ری اکت رو پیاده سازی کنیم، تنها کاری که مونده استفاده کردن از این ویژگی تو اپیکیشن هست.
قدم ششم
همونطور که صحبت کرده بودیم، ما میخوایم یک کامپوننت Card بسازیم که بالای این کامپوننت یک سوئیچر برای جابجایی بین حالت دارک مود و لایت مود وجود داشته باشه و با تغییر این سوئیچر، حالت نمایش Card تغییر پیدا کنه.
برای ساخت کامپوننت Card، من یک فایل با نام Card.js میسازم و کد زیر رو داخلش قرار میدم :
import React from 'react';
import me from './images/modal.jpg';
function Card() {
return (
Devs Solutions
{' '}
Showing dark and light mode with react and Tailwind css
Building the dark and light mode modal using React and Tailwind CSS. we are going to
save the current theme in the LocalStoage and it will be pulled whenever the page is
refreshed.
#react
#Tailwind
#darkmode
);
}
export default Card;
تیکه کد بالا چیز پیچیده ای نیست و صرفا یک کامپوننت Card هست که یکسری متن و تصویر نمایش میده.
برای اینکه کامپوننت Card نمایش داده بشه، کافیه به فایل App بریم و کامپوننت Card رو فراخوانی کنیم :
import Card from './Card';
import Switcher from './Switcher';
function App() {
return (
);
}
export default App;
تو تیکه کد بالا ما کامپوننت Card و Switcher رو نمایش دادیم.
حالا اپیکیشن ما بصورت زیر نمایش داده میشه :
و اگه روی آیکن خورشید کلیک کنیم، میبینیم که اپیکیشن ما به حالت دارک مود تغییر پیدا میکنه :
جمع بندی
پیاده سازی حالت دارک مود در React به لطف وجود Tailwind خیلی خیلی آسونه. ما دیدیم که چطور به کمک یک ترفند ساده میتونیم حالت Dark Mode رو به اپیکیشن خودمون اضافه کنیم و تجربه کاربری اپیکیشن خودمون رو تا حد خیلی خیلی زیادی افزایش بدیم.
امیدوارم این مقاله براتون مفید واقع شده باشه 🙂
درباره احمد احمدنژاد
من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️
نوشتههای بیشتر از احمد احمدنژاد
دیدگاهتان را بنویسید