چگونه یک تم حالت تاریک را به برنامه React خود اضافه کنید

حالت تاریک می تواند برای چشم ها بسیار آسان تر باشد. در اینجا نحوه افزودن تم حالت تاریک به برنامه بعدی React آورده شده است.

شکی وجود ندارد که حالت تاریک این روزها در همه جا محبوب است. برنامه های کاربردی بیشتر و بیشتری قابلیت تغییر به یک تم تیره را ارائه می دهند و دلیل خوبی هم دارد. اگر به دنبال اضافه کردن حالت تاریک به برنامه React خود هستید، چند کار وجود دارد که باید انجام دهید. در این مقاله، نحوه اضافه کردن حالت تاریک به برنامه React را با استفاده از قلاب‌های useState و useEffect خواهید آموخت.

حالت تاریک چیست؟

حالت تاریک تمی است که پالت رنگ یک برنامه را از روشن به تیره تغییر می دهد. امروزه اکثر برنامه ها قابلیت جابجایی بین حالت روشن و تاریک را دارند. این می تواند برای کسانی که ترجیح می دهند در یک محیط تاریک کار کنند، یا برای کسانی که برای چشم راحت تر کار می کنند مفید باشد.

چرا از حالت تاریک استفاده کنیم؟

دلایل مختلفی وجود دارد که ممکن است بخواهید از حالت تاریک در برنامه React خود استفاده کنید. بیایید نگاهی به چند مورد از محبوب ترین آنها بیندازیم.

1. بهبود عمر باتری

یکی از مزایای حالت تاریک این است که می تواند به بهبود عمر باتری دستگاه های دارای صفحه نمایش OLED یا AMOLED کمک کند. این به این دلیل است که پیکسل های تیره تر برای نمایش نیاز به انرژی کمتری دارند.

2. کاهش فشار چشم

اگر در شب در حال مرور وب یا استفاده از برنامه ها هستید، حالت تاریک می تواند به کاهش فشار چشم کمک کند. این به این دلیل است که میزان نور سفید یا آبی روشنی که از صفحه نمایش ساطع می شود را کاهش می دهد.

3. یک تجربه همهجانبه تر ایجاد کنید

برخی از افراد متوجه می شوند که حالت تاریک تجربه ای فراگیرتر ایجاد می کند. این می تواند به ویژه در هنگام استفاده از برنامه ها یا وب سایت هایی با محتوای زیاد، مانند برنامه های خبری یا رسانه های اجتماعی، صادق باشد.

نحوه اضافه کردن حالت تاریک به برنامه React

افزودن حالت تاریک به برنامه React نسبتا ساده است. مراحل لازم برای افزودن حالت تاریک به برنامه React شما در زیر ذکر شده است.

قبل از شروع، باید مطمئن شوید که یک برنامه React را راه اندازی کرده اید.

1. از useState Hook استفاده کنید

اولین کاری که باید انجام دهید این است که یک متغیر حالت برای ردیابی موضوع فعلی برنامه خود ایجاد کنید. این کار را می توان با استفاده از قلاب useState انجام داد. برای این کار، باید درک اولیه ای از نحوه کار با قلاب useState داشته باشید.

import React, { useState } from'react';
functionApp() {
  const [theme, setTheme] = useState('light');
  return (
    <div className={`App ${theme}`}>
      <h1>Hello, world!</h1>
    </div>
  );
}
exportdefault App;

قطعه کد قلاب useState را از React وارد می کند و یک متغیر حالت به نام theme ایجاد می کند. متغیر theme موضوع فعلی برنامه را ردیابی می کند، که کد به طور پیش فرض روی “light” تنظیم می کند.

2. یک دکمه Toggle اضافه کنید

در مرحله بعد، یک دکمه جابجایی به برنامه اضافه کنید تا کاربران بتوانند بین حالت روشن و تاریک جابجا شوند. این کار با کد زیر قابل انجام است:

import React, { useState } from'react';
functionApp() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  return (
    <div className={`App ${theme}`}>
      <buttononClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
exportdefault App;

قطعه کد بالا شامل یک تابع toggleTheme برای تغییر متغیر حالت تم بین “light” و “dark” و همچنین دکمه ای برای فراخوانی تابع toggleTheme هنگام کلیک کردن است.

3. از useEffect Hook استفاده کنید

در مرحله بعد، از قلاب useEffect برای به روز رسانی پویا موضوع برنامه بر اساس متغیر حالت تم استفاده کنید.

import React, { useState, useEffect } from'react';
functionApp() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <buttononClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
exportdefault App;

قطعه کد بالا از قلاب useEffect برای به روز رسانی className عنصر document.body بر اساس متغیر حالت تم استفاده می کند. این به شما امکان می دهد تا به صورت پویا CSS برنامه را بر اساس موضوع به روز کنید.

4. اضافه کردن CSS برای حالت های تاریک و روشن

سپس CSS را برای حالت های تاریک و روشن اضافه کنید. می توانید این کار را با ایجاد یک فایل به نام “darkMode.css” و افزودن CSS زیر انجام دهید:

.dark {
  background-color: #333;
  color: #fff;
}
.light {
  background-color: #fff;
  color: #333;
}

پس از آن، باید فایل CSS را به برنامه خود وارد کنید. این کار با کد زیر قابل انجام است:

import React, { useState, useEffect } from'react';
import'./darkMode.css';
functionApp() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <buttononClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
exportdefault App;

5. به حالت های مختلف بروید

اکنون که CSS را برای حالت‌های تاریک و روشن اضافه کرده‌اید، می‌توانید با کلیک کردن روی دکمه جابجایی بین آن‌ها جابجا شوید. برای این کار ابتدا باید سرور توسعه را راه اندازی کنید. با اجرای دستور ترمینال زیر می توانید این کار را انجام دهید:

npm start

پس از آن، می توانید برنامه را در مرورگر باز کنید و روی دکمه جابجایی کلیک کنید تا بین حالت تاریک و روشن جابجا شوید.

گزینه های اضافی برای حالت تاریک در React

اگر می‌خواهید طرح زمینه در بازخوانی‌های صفحه باقی بماند، می‌توانید از LocalStorage API برای ذخیره داده‌ها استفاده کنید. برای این کار ابتدا باید کد زیر را به برنامه خود اضافه کنید:

import React, { useState, useEffect } from'react';
import'./darkMode.css';
functionApp() {
  const [theme, setTheme] = useState(
    localStorage.getItem('theme') || 'light'
  );
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <buttononClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
exportdefault App;

قطعه کد بالا شامل قابلیت حفظ موضوع پس از بازخوانی صفحه است. این کار با استفاده از localStorage API انجام می شود. ابتدا بررسی می کند که آیا تمی ذخیره شده در localStorage وجود دارد یا خیر.

اگر موضوعی وجود داشته باشد، از آن تم استفاده می شود. در غیر این صورت، از تم “سبک” استفاده می شود. در مرحله بعد، کدی به قلاب useEffect اضافه می شود تا تم در localStorage ذخیره شود. این تضمین می کند که موضوع در سراسر به روز رسانی صفحه باقی بماند.

حالت تاریک به React ختم نمی شود

راه های زیادی وجود دارد که می توانید حالت تاریک را به برنامه React خود اضافه کنید. در این مقاله، یک راه برای انجام آن با استفاده از قلاب useState و useEffect نشان داده شده است. با این حال، راه های بسیار دیگری نیز وجود دارد که می توانید آن را انجام دهید.

به عنوان مثال، می توانید از React Context API برای ایجاد یک ارائه دهنده تم استفاده کنید. این به شما این امکان را می دهد که کل برنامه خود را در یک مؤلفه ارائه دهنده تم بپیچید و به تم در هر نقطه از برنامه خود دسترسی داشته باشید.

همچنین می توانید حالت تاریک را در مرورگر خود فعال کنید و از پرس و جوهای رسانه ای CSS برای اعمال سبک های مختلف بسته به موضوع مرورگر استفاده کنید.

منبع مقاله