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

تقریبا تمام ادیتورها دارای تم های متفاوتی هستن تا کاربران را با سلیقه های متفاوتشون راضی نگه دارن. ادیتور اتم هم از این قضیه مستثنی نیست و تم های متفاوتی داره.

همچنین شما می تونید از اینجا , تم های موجود برای این ادیتور رو مشاهده و در صورت تمایل , هر کدوم از این تم ها رو بر روی ادیتور خودتون نصب کنید. توسعه دهندگان متفاوت از سراسر دنیا برای اتم , تم اختصاصی طراحی و اون رو در فضای وب منتشر می کنن. پس چرا شما این کار رو نکنید؟ 😉

جالبه بدونید که ادیتور اتم به کمک HTML , CSS , جاوااسکریپت و Node.js نوشته شده و توسط Electron اجرا میشه. پس می تونیم تصور کنیم که تمام محیط کدنویسی در اتم , مثل صفحات وب هستن که از HTML و CSS تشکیل شدن. خیلی راحت با تغییر فایل CSS می تونیم یک تم اختصاصی جدید برای خودمون طراحی کنیم.

خیلی عالی میشه اگر با LESS آشنایی داشته باشیم , چون فایل های اختصاصی تم در اتم با ساختار less نوشته شدن و دونستن این موضوع کمک خیلی زیادی میکنه. اما مختصر بگم که less یک پیش پردازنده CSS هست. یعنی یه زبانی که کدهای ما در نهایت به CSS تبدیل میشن و استفاده از این روش , مزیت های خیلی زیادی داره از جمله تعریف و استفاده از متغیرها.

شروع کار

شاید با خودتون فکر کنید که تغییر تم نهایتا در حد تغییر رنگ متن ها (از قبیل کلمات کلیدی , متغیرها , رشته ها و …) هست اما در اتم شما میتونید تمام المان های محیط کدنویسی خودتون رو تغییر بدید. اعم از سایدبار , تب ها و هرچیز دیگه.

• ادیتور اتم رو باز کنید.
• Cmd + Shift + P (برای ویندوز Ctrl + Shift + P) رو اجرا می کنیم.
• واژه ی generate رو تایپ می کنیم.
• بر روی گزینه ی Package Generator: Generate syntax theme کلیک می کنیم.

اتم از شما درخواست یک آدرس برای ذخیره کردن تم می کنه. می تونید تم خودتون رو هرجایی ذخیره کنید. بهتره که اسم تم شما به –syntax ختم بشه و کلمات با “-“ از هم جدا بشن. برای مثال من برای این تم , اسم sample-syntax رو انتخاب می کنم.

ساختار فایل های تم در اتم

وقتی اتم , بسته ی تم رو به صورت خودکار ایجاد کرد , خیلی راحت می تونید با دونستن ساختار فایل های اون بسته , تم پیش فرض رو ویرایش و با نامی که قبلا انتخاب کردید , ذخیره کنید.

فایل اصلی تم index.less هست. همونطور که می بینید این فایل فقط فایل base.less رو در خودش وارد کرده. فایل base.less هم لیست بلندی از استایل های پایه , مانند رنگ پس زمینه ادیتور رو در خودش قرار داده و در ابتدای کار , فایل syntax-variables.less رو در خودش وارد کرده. این فایل حاوی چند ساختار متنی هست. مانند رنگ نوشته ها , رنگ متن و یا پس زمینه ی شماره خطوط و …

در نهایت این فایل , color.less رو در خود وارد کرده که لیست کوتاهی از نام متغیرهای رنگی به همراه کد رنگی آن هاست. برای اینکه تغییرات رو بر روی تم خودم ببینم , باید تم ایجاد شده رو برای اتم انتخاب کنم. از طریق Settings>Themes , تم جدید رو انتخاب می کنم.

برای مثال من کد رنگی متغیر dark-gray رو تغییر میدم و اتم رو یک بار از منوی View>Developer>Reload , دوباره بارگذاری می کنم.

یا برای مثال می تونید متغیر very-dark-gray رو تغییر بدید تا رنگ پس زمینه ادیتور رو تغییر بدید.

چه اتفاقی میفته؟

ساختار به این صورت هست که چند متغیر با کدهای رنگی متفاوت در فایل color.less تعریف میشن. در مرحله بالاتر در فایل syntax-variables.less با این متغیرهای رنگی , رنگ های بیشتری تولید میشه که نام اون رنگ , نشون میده که قرار هست در کدام قسمت استفاده بشه. برای مثال syntax-background-color قرار هست که رنگ پس زمینه رو مشخص کنه و برابر هست با متغیر very-dark-gray.
متغیر very-dark-gray هم برابر هست با کد رنگ #۱d1f21 و در نتیجه پس زمینه ما برابر میشه با رنگ این کد.

اگر با ساختار LESS آشنا باشید , خیلی راحت می تونید فایل base.less رو که مربوط به تمام المان های ادیتور ( و نه فقط رنگ) میشه رو به راحتی تغییر بدید.

پیشنهاد می کنم مقاله “آشنایی مقدماتی با LESS در ۵ دقیقه” رو مطالعه کنید.

همین حالا شروع کنید و تم اختصاصی خودتون رو بسازید. 😉