حالت Dark Mode به صورت کامل در React

همانطور که ما به سمت یک UX بهتر و قابل دسترس تر در وب حرکت می کنیم، حالت تاریک به یک ویژگی اصلی برای برنامه های وب تبدیل شده است. توسعه حالت dark چیزی فراتر از افزودن یک دکمه toggle ساده و مدیریت متغیر CSS است. در اینجا حالت تاریک را مورد بحث قرار می دهیم و یک تجربه کامل از حالت تاریک را در یک برنامه React  را به دست می آوریم با ما همراه باشید.

حالت تاریک چیست؟
حالت تاریک یک ویژگی رابط کاربری است که طرح رنگ یک برنامه یا وب سایت را برای استفاده از رنگ های تیره تر تغییر می دهد و معمولاً پس زمینه های سیاه یا خاکستری تیره را جایگزین پس زمینه های سفید یا روشن می کند. این یک جلوه بصری با کنتراست بالا ایجاد می کند که خواندن متن و مشاهده محتوا را در محیط های کم نور یا تاریک آسان تر می کند، فشار چشم را کاهش می دهد و خوانایی کلی را بهبود می بخشد.

حالت تاریک به دلیل مزایای عملکردی آن، از جمله افزایش دسترسی برای کاربران دارای اختلالات بینایی، بهبود تمرکز و بهره‌وری در تنظیمات حرفه‌ای، و جذابیت زیبایی‌شناسی شیک و مدرن آن، محبوبیت پیدا کرده است.

قابلیت دسترسی در حالت تاریک
حالت تاریک نه تنها به دلیل جذابیت زیبایی شناختی، بلکه به دلیل مزایای بالقوه آن از نظر دسترسی، محبوبیت زیادی به دست آورده است. برخی از ملاحظات کلیدی برای دسترسی در حالت تاریک عبارتند از:

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

خوانایی بهبود یافته: کنتراست بالا بین پس‌زمینه‌های تیره و متن روشن می‌تواند خوانایی را افزایش دهد، به‌ویژه برای کاربرانی که دارای اختلالات بینایی یا شرایطی مانند نارساخوانی هستند.

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

قابلیت سفارشی‌سازی: حالت تاریک اغلب امکان سفارشی‌سازی طرح‌های رنگی، سطوح کنتراست و اندازه‌های فونت را فراهم می‌کند و کاربرانی را که دارای اختلالات بینایی هستند آسان‌تر می‌کند تا رابط کاربری را با نیازهای خاص خود تنظیم کنند.

استانداردهای دسترس‌پذیری: بسیاری از استانداردهای دسترسی، مانند دستورالعمل‌های دسترسی به محتوای وب (WCAG)، استفاده از طرح‌های رنگی با کنتراست بالا را توصیه می‌کنند که حالت تاریک می‌تواند به دستیابی به آن کمک کند.

چرا باید از حالت تاریک استفاده کنید؟
حالت تاریک چندین مزیت را ارائه می دهد که می تواند UX را افزایش دهد. اول، حالت تاریک می‌تواند فشار روی چشم‌های شما را کاهش دهد، به‌ویژه زمانی که از صفحه نمایش برای مدت طولانی استفاده می‌کنید و میزان نور آبی ساطع شده را کاهش می‌دهد و تجربه بصری نرم‌تر و راحت‌تری ایجاد می‌کند.

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

حالت تاریک به دلیل ظاهر شیک و مدرن خود محبوب شده است و بسیاری از کاربران آن را از نظر بصری جذاب و استفاده از آن لذت بخش می دانند. در نهایت، حالت تاریک اغلب با گزینه‌های سفارشی‌سازی همراه است، که به کاربران امکان می‌دهد از میان طرح‌های رنگی، سطوح کنتراست و اندازه‌های فونت مختلف انتخاب کنند، و آن را به گزینه‌ای همه کاره و متناسب با ترجیحات فردی تبدیل می‌کند.

استفاده از تنظیمات سیستم
هیچ‌کس نمی‌خواهد وقتی کاربر وارد وب‌سایتش می‌شود چشم‌های او را آزار دهد! بهترین تمرین این است که تم برنامه را مطابق با تنظیمات دستگاه تنظیم کنید. پرس‌وجوهای رسانه‌ای CSS، که عموماً برای استفاده با طراحی واکنش‌گرا شناخته می‌شوند، به ما کمک می‌کنند تا سایر ویژگی‌های دستگاه را بررسی کنیم.

در اینجا، از prefers-color-scheme استفاده می کنیم که بر اساس طرح رنگ انتخابی دستگاه، dark، light یا no-preference را به ما می دهد. و مانند هر درخواست رسانه دیگری، سبک‌ها در این بلوک زمانی اعمال می‌شوند که طرح رنگ دستگاه روی dark تنظیم شود. قرار دادن آن در برخی از سبک های کامپوننت به شکل زیر است:

body {
  background-color: #dadada;
  color: #1f2023;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1f2023;
    color: #dadada;
  }
}

این شروع خوبی است، اما نمی توان به اضافه کردن این سبک ها در هر جا ادامه داد. در این مورد، متغیرهای CSS پاسخگو هستند.

مدیریت تم ها با استفاده از متغیرهای CSS
متغیرهای CSS یکی از ابزارهایی هستند که برای مدت طولانی در طراحی وب وجود نداشتند. اکنون که آنها با همه مرورگرها در دسترس هستند، CSS سرگرم کننده تر و کمتر دردسرساز است. متغیرهای CSS به عنصر(هایی) که بر روی آنها اعلان شده اند و در آن شرکت می کنند (به عنوان مثال، عناصر مقادیر نادیده گرفته شده برای کودکان) هستند. ما می توانیم از متغیرهای CSS برای تعریف تم های برنامه خود استفاده کنیم. در اینجا یک قطعه کوچک برای یادآوری نحوه اعلان متغیرهای CSS آورده شده است:

body {
  --color-background: #fafafa;
  --color-foreground: #1f2023;
}

برای استفاده از این متغیرها در اجزای خود، کدهای رنگی را با متغیرها عوض می کنیم:

.App-header {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

اکنون که رنگ‌های ما از طریق متغیر CSS تعریف شده‌اند، می‌توانیم مقادیر بالای برای HTML خود (<body>) را تغییر دهیم و بازتاب آن در همه عناصر دیده می‌شود:

body {
  --color-background: #fafafa;
  --color-foreground: #1f2023;
}
@media (prefers-color-scheme: dark) {
  body {
  --color-background: #1f2023;
  --color-foreground: #efefef;
  }
}

پیاده سازی تغییر رنگ
در این مرحله، ما ساده ترین راه حل را بر اساس ترجیحات دستگاه داریم. اکنون، ما باید آن را برای دستگاه هایی که به طور بومی از حالت تاریک پشتیبانی نمی کنند، بررسی کنیم. در این مورد، ما باید تنظیمات ترجیحی خود را برای برنامه وب ما برای کاربران آسان کنیم. من React-toggle را انتخاب کردم تا راه حل ما در a11y بهتر شود. این را می توان از طریق یک دکمه ساده و useState به دست آورد.

 کامپوننت toggle ما به این صورت است:

import React, { useState } from "react";
import Toggle from "react-toggle";

export const DarkModeToggle = () => {
  const [isDark, setIsDark] = useState(true);

  return (
    <Toggle
      checked={isDark}
      onChange={({ target }) => setIsDark(target.checked)}
      icons={{ checked: "🌙", unchecked: "🔆" }}
      aria-label="Dark mode toggle"
    />
  );
};

این کامپوننت حالت انتخابی کاربر را نگه می‌دارد، اما مقدار پیش‌فرض چطور؟ راه حل CSS ما به اولویت دستگاه احترام می گذارد.خب می آیم از کامپوننت React خود، از react-responsive استفاده می کنیم. در زیر hood ، از Window.matchMedia استفاده می کند و هنگامی که خروجی query تغییر می کند، کامپوننت ما را دوباره ارائه می دهد.

یک نسخه به روز شده از button به شکل زیر است:

import React, { useState } from "react";
import Toggle from "react-toggle";
import { useMediaQuery } from "react-responsive";

export const DarkModeToggle = () => {
  const [isDark, setIsDark] = useState(true);

  const systemPrefersDark = useMediaQuery(
    {
      query: "(prefers-color-scheme: dark)",
    },
    undefined,
    (isSystemDark) => setIsDark(isSystemDark)
  );

  return (
    <Toggle
      checked={isDark}
      onChange={({ target }) => setIsDark(target.checked)}
      icons={{ checked: "🌙", unchecked: "🔆" }}
      aria-label="Dark mode toggle"
    />
  );
};

UseMediaQuery Hook یک query مقدار اولیه و یک کنترل کننده onChange می گیرد که هر زمان که خروجی query تغییر می کند فعال می شود.

شبیه سازی حالت تاریک در مرورگرها
اکنون، کامپوننت ما با تنظیمات برگزیده دستگاه همگام خواهد بود و مقدار آن بر این اساس به روز می شود. اما، چگونه می توانیم آزمایش کنیم که آیا درست انجام شده است؟ به لطف مرورگرهای مناسب برای توسعه، می‌توانیم تنظیمات default دستگاه را از تغییر داد.

خب بیایم که تغییر حالت کامپوننت toggle را به CSS متصل کنیم. این کار را می توان با چندین تکنیک مختلف انجام داد. در اینجا، ما ساده‌ترین مورد را انتخاب کرده‌ایم: اضافه کردن یک کلاس به تگ body و اجازه دادن به متغیرهای CSS که بقیه کارها را انجام دهند. برای تطبیق با این موضوع، ما CSS تگ body خود را به روز می کنیم:

body {
  --color-background: #fafafa;
  --color-foreground: #1f2023;
}
body.dark {
  --color-background: #1f2023;
  --color-foreground: #efefef;
}

ما همچنین کامپوننت DarkModeToggle خود را با این useEffect Hook به‌روزرسانی می‌کنیم تا کلاس‌ها را بر اساس وضعیت isDark به تگ body اضافه و حذف کنیم:

...
useEffect(() => {
  if (isDark) {
    document.body.classList.add('dark');
  } else {
    document.body.classList.remove('dark');
  }
}, [isDark]); 
...

ذخیره حالت ترجیحی کاربر با استفاده از use-persisted-state
اگر طرح رنگ ترجیحی کاربر را در state کامپوننت نگه داریم، ممکن است مشکل ساز شود زیرا نمی توانیم مقادیر خارج از این کامپوننت را دریافت کنیم. همچنین، به محض اینکه برنامه ما دوباره نصب شود، ناپدید می شود. هر دو مشکل را می توان به روش های مختلف حل کرد، از جمله با React Context یا هر رویکرد مدیریت دیگر.

یکی دیگر از راه حل ها استفاده از use-persisted-state است. این به ما کمک می کند تا تمام الزامات را برآورده کنیم. وضعیت را با localStorage حفظ می کند و وقتی برنامه در برگه های مختلف مرورگر باز است، وضعیت را همگام نگه می دارد. اکنون می‌توانیم حالت تاریک خود را در یک Hook سفارشی جابجا کنیم که تمام منطق مربوط به درخواست رسانه و حالت پایدار را در بر می‌گیرد. این هوک چگونه باید باشد:

import { useEffect, useMemo } from "react";
import { useMediaQuery } from "react-responsive";
import createPersistedState from "use-persisted-state";
const useColorSchemeState = createPersistedState("colorScheme");

export function useColorScheme() {
  const systemPrefersDark = useMediaQuery(
    {
      query: "(prefers-color-scheme: dark)",
    },
    undefined
  );

  const [isDark, setIsDark] = useColorSchemeState();
  const value = useMemo(
    () => (isDark === undefined ? !!systemPrefersDark : isDark),
    [isDark, systemPrefersDark]
  );

  useEffect(() => {
    if (value) {
      document.body.classList.add("dark");
    } else {
      document.body.classList.remove("dark");
    }
  }, [value]);

  return {
    isDark: value,
    setIsDark,
  };
}

اکنون کامپوننت toggle button بسیار ساده‌تر خواهد بود:

import React from "react";
import Toggle from "react-toggle";
import { useColorScheme } from "./useColorScheme";

export const DarkModeToggle = () => {
  const { isDark, setIsDark } = useColorScheme();
  return (
    <Toggle
      checked={isDark}
      onChange={({ target }) => setIsDark(target.checked)}
      icons={{ checked: "🌙", unchecked: "🔆" }}
      aria-label="Dark mode toggle"
    />
  );
};

انتخاب رنگ های تم تیره
در حالی که حالت تاریک خود را می توان یک ویژگی دسترسی در نظر گرفت، ما باید بر روی دسترسی به این ویژگی برای مخاطبان گسترده تر تمرکز کنیم. ما از react-toggle در نسخه نمایشی خود استفاده کردیم تا اطمینان حاصل کنیم که دکمه مورد استفاده برای تغییر طرح رنگ از تمام استانداردهای a11y پیروی می کند. بخش مهم دیگر انتخاب رنگ پس زمینه و پیش زمینه در دو حالت تاریک و روشن است. به نظر من colors.review ابزاری عالی برای تست نسبت کنتراست بین رنگ ها است. داشتن درجه AAA باعث می‌شود برنامه‌های ما راحت‌تر حرکت کنند و نگاه کردن به آن‌ها راحت‌تر باشد.

مدیریت تصاویر در حالت تاریک
برای زیبایی بهتر، معمولا صفحاتی با تصاویر روشن داریم. در حالت تاریک، تصاویر روشن ممکن است باعث ناراحتی کاربران شوند. چندین تکنیک می تواند از این مشکلات جلوگیری کند، از جمله استفاده از تصاویر مختلف برای هر دو حالت و تغییر رنگ در تصاویر SVG. یک راه این است که از فیلترهای CSS بر روی تمام عناصر تصویر استفاده کنید. این به کاهش فشار چشم هنگام نمایش تصاویر روشن بر روی بوم کاربر کمک می کند. برای فعال کردن این، می‌توانیم موارد زیر را به استایل‌های اصلی خود اضافه کنیم:

body {
  --color-background: #fafafa;
  --color-foreground: #1f2023;

  --image-grayscale: 0;
  --image-opacity: 100%;
}
body.dark {
  --color-background: #1f2023;
  --color-foreground: #efefef;

  --image-grayscale: 50%;
  --image-opacity: 90%;
}

img,
video {
  filter: grayscale(var(--image-grayscale)) opacity(var(--image-opacity));
}

آیا باید برای حالت تاریک تست بنویسید؟
تست یک عمل ضروری در توسعه نرم افزار برای اطمینان از کیفیت و قابلیت اطمینان برنامه ها است. هنگام پیاده‌سازی حالت تاریک در یک برنامه React، ممکن است تعجب کنید که آیا نوشتن تست‌ها به‌طور خاص برای ویژگی حالت تاریک ضروری است یا خیر. در اینجا چند نکته وجود دارد که باید مورد توجه قرار گیرد:

پیچیدگی اجرای حالت تاریک
اگر ویژگی حالت تاریک در برنامه React شما نسبتاً ساده است، مانند تغییر رنگ پس‌زمینه و رنگ متن، و شامل منطق یا تعاملات پیچیده نیست، می‌توانید استدلال کنید که نوشتن تست‌ها به‌طور خاص برای حالت تاریک ضروری نیست. در چنین مواردی، می‌توانید برای پوشش دادن رفتار حالت تاریک به عنوان بخشی از آزمایش کلی برنامه، به روش‌های آزمایشی معمول خود، مانند آزمایش واحد و آزمایش سرتاسر، تکیه کنید.

اهمیت حالت تاریک در برنامه
اهمیت ویژگی حالت تاریک را در برنامه React خود در نظر بگیرید. فرض کنید حالت تاریک بخش مهمی از UX است و عملکرد صحیح آن برای قابلیت استفاده و دسترسی کلی برنامه بسیار مهم است. در این مورد، نوشتن تست‌های مخصوص حالت تاریک توصیه می‌شود. حالت تاریک به طور فزاینده ای به عنوان یک ترجیح کاربر محبوب شده است، به خصوص برای برنامه هایی که در شرایط کم نور استفاده می شوند، و اطمینان از عملکرد مناسب آن می تواند تا حد زیادی UX را بهبود بخشد.

الزامات دسترسی
حالت تاریک می تواند دسترسی را تحت تأثیر قرار دهد زیرا بر نسبت کنتراست رنگ، اندازه فونت و سایر عناصر بصری تأثیر می گذارد. فرض کنید برنامه شما باید استانداردهای دسترس‌پذیری، مانند دستورالعمل‌های دسترسی به محتوای وب (WCAG) را رعایت کند. در این مورد، مهم است که آزمایش حالت تاریک را برای اطمینان از اینکه معیارهای دسترسی مورد نیاز را برآورده می کند شامل شود. تست‌های نوشتن برای حالت تاریک می‌تواند به شما کمک کند تا مشکلات دسترسی را در مراحل اولیه توسعه پیدا کنید و اطمینان حاصل کنید که برنامه شما برای همه کاربران قابل دسترسی است.

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

اگر تصمیم دارید برای حالت تاریک خود تست بنویسید، برخی از این سناریوها را برای اطمینان از عملکرد صحیح ویژگی حالت تاریک در برنامه خود در نظر بگیرید:

شناسایی کامپوننت‌های حالت تاریک: کامپوننت‌ها یا بخش‌هایی را که تحت تأثیر حالت تاریک قرار گرفته‌اند، مانند دکمه‌ها، متن، تصاویر، پس‌زمینه یا سایر عناصر رابط کاربری شناسایی کنید.

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

نوشتن موارد تست: از کتابخانه‌های آزمایشی مانند Jest یا React Testing Library برای نوشتن تست‌های واحد یا یکپارچه‌سازی برای اجزای خود استفاده کنید. رفتار مورد انتظار اجزا را در شرایط مختلف حالت تاریک آزمایش کنید

تست دسترس‌پذیری: با استفاده از ابزارهای دسترس‌پذیری مانند Axe برای بررسی کنتراست رنگ، اندازه فونت و سایر عناصر بصری، اطمینان حاصل کنید که حالت تاریک با استانداردهای دسترس‌پذیری مطابقت دارد.

به‌روزرسانی مجموعه‌های آزمایشی: مجموعه‌های آزمایشی خود را با تغییر یا اصلاح اجرای حالت تاریک خود به‌روز نگه دارید

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

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