گوگل کروم افزونه بسیار خوبی برای طرفداران dark-mode دارد که میتوانید با استفاده از آن حدودا بدون مشکل در ۹۵ درصد از وبسایت هایی که این حالت را پشتیبانی نمیکنند استفاده نمایید. با کمی بررسی نحوه کار آن متوجه شدم که اسکریپتی توسط تیم توسعه دهنده آن تولید شده برای افزودن این قابلیت به وبسایت خودتان, پس از تست و اضافه کردن آن به چند وبسایت مختلف که درحال توسعه آن بودیم نتیجه بسیار خوبی داشت. این شد گفتم این مطلب را با دوستان به اشتراک بگذارم شاید به سایت .NetTips هم اضافه بشه که نیازی به داشتن افزونه کروم در این سایت هم نداشته باشیم. برای نصب این پکیج میتوانید از npm استفاده نمایید:
پس از دریافت این پکیج و افزودن آن به صفحه html خودتان میتوانید به این صورت از آن استفاده نمایید:
و یا اگر از فریم ورکهای جاوا اسکریپتی استفاده میکنید به این روش ابتدا دو متد فعال و غیر فعال کردن آن را import کرده و از آن استفاده نمایید.
متد enable در این پکیج تنظیمات زیر را دریافت میکند:
اگر افزونه کروم را نصب کرده باشید این تنظیمات برای شما مفهومتر خواهد بود که دقیقا هر کدام برای چه کاری هستند چرا که در این افزونه این موارد قابل تنظیم است. در آخر تنها کاری که باید انجام دهید اضافه کردن یک button به صفحه خود برای فعال و غیر فعال کردن darkmode و ذخیره حالت مورد نظر کاربر در یک کوکی یا local-Storage مرورگر میباشد تا در مراجعه بعدی بتوانید حالت مورد نظر را برای کاربر فعال کنید. چندین اسکریپت و پکیج مشابه هم وجود دارد مانند darkmodejs که با آنها نسبت به darkreader به مراتب به مشکلات زیادی در cssهای خود مواجه خواهید شد. و نیاز دارند که حدودا ۵۰ درصد از cssهای خود را برای داشتن darkmode بازنویسی نمایید. برای کسب اطلاعات بیشتر در مورد darkreader میتوانید به این لینک مراجعه نمایید.
npm install darkreader
// فعال کردن DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 }); // غیر فعال کردن DarkReader.disable();
import { enable as enableDarkMode, disable as disableDarkMode, } from 'darkreader'; // فعال کردن enableDarkMode({ brightness: 100, contrast: 90, sepia: 10, }); // غیر فعال کردن disableDarkMode();
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 };
Announcing VSCodeThemes
Preview themes from the VSCode marketplace.
About 5 months ago I posted a side project to r/vscode that got relatively popular, and since then I’ve been working on making it useful.
A theme engine built in jQuery and Stylus Demo