گوگل کروم
افزونه بسیار خوبی برای طرفداران dark-mode دارد که میتوانید با استفاده از آن حدودا
بدون مشکل در ۹۵ درصد از وبسایت هایی که این حالت را پشتیبانی نمیکنند استفاده نمایید. با کمی بررسی نحوه کار آن متوجه شدم که اسکریپتی توسط تیم توسعه دهنده آن تولید شده برای افزودن این قابلیت به وبسایت خودتان, پس از تست و اضافه کردن آن به چند وبسایت مختلف که درحال توسعه آن بودیم نتیجه بسیار خوبی داشت. این شد گفتم این مطلب را با دوستان به اشتراک بگذارم شاید به سایت .NetTips هم اضافه بشه که نیازی به داشتن افزونه کروم در این سایت هم نداشته باشیم. برای نصب این پکیج میتوانید از npm استفاده نمایید:
پس از دریافت این پکیج و افزودن آن به صفحه html خودتان میتوانید به این صورت از آن استفاده نمایید:
// فعال کردن
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
// غیر فعال کردن
DarkReader.disable();
و یا اگر از فریم ورکهای جاوا اسکریپتی استفاده میکنید به این روش ابتدا دو متد فعال و غیر فعال کردن آن را import کرده و از آن استفاده نمایید.
import {
enable as enableDarkMode,
disable as disableDarkMode,
} from 'darkreader';
// فعال کردن
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
// غیر فعال کردن
disableDarkMode();
متد enable در این پکیج تنظیمات زیر را دریافت میکند:
var defaultTheme = {
mode: 1, // (0 1) for enabling or disabling dark mode
brightness: 100,
contrast: 100,
grayscale: 0,
sepia: 0,
useFont: false,
fontFamily: '', // add custom font
textStroke: 0,
engine: ThemeEngines.dynamicTheme,
stylesheet: '', // add custom css styles
};
اگر افزونه کروم را نصب کرده باشید این تنظیمات برای شما مفهومتر خواهد بود که دقیقا هر کدام برای چه کاری هستند چرا که در این افزونه این موارد قابل تنظیم است. در آخر تنها کاری که باید انجام دهید اضافه کردن یک button به صفحه خود برای فعال و غیر فعال کردن darkmode و ذخیره حالت مورد نظر کاربر در یک کوکی یا local-Storage مرورگر میباشد تا در مراجعه بعدی بتوانید حالت مورد نظر را برای کاربر فعال کنید. چندین اسکریپت و پکیج مشابه هم وجود دارد مانند
darkmodejs که با آنها نسبت به darkreader به مراتب به مشکلات زیادی در cssهای خود مواجه خواهید شد. و نیاز دارند که حدودا ۵۰ درصد از cssهای خود را برای داشتن darkmode بازنویسی نمایید. برای کسب اطلاعات بیشتر در مورد darkreader میتوانید به
این لینک مراجعه نمایید.
مشاهده مطلب اصلی