How to create a Discord theme

چطوری یک تم دیسکورد بسازیم

Languages :
English
Persian/Farsi

<---------------------------------------------English--------------------------------------------->

A document to create a discord theme 😀
Learn how to create a theme for Discord
Before we begin, I must say that I am teaching you what I know and I have no claim 😃❤

Prerequisites 📃

• BetterDiscord
• Code editor | My suggestion : Visual Studio Code
  What is Better Discord? BetterDiscord (BD) In short, a client for Discord that allows us to install themes and plugins on Discord

BetterDiscord installation tutorial ❗

how-to-download-bd.mp4

Before we start ❗

In order for us to create a theme, we have to style the discord elements. Now, how do we find these elements 🤔
To find the elements, we have to hold the buttons below

• Windows : Ctrl+Shift+I
• Mac : ⌥+⌘+I
  After holding these buttons, the inspector page will open for you

When page opens up, you have to press Ctrl+Shift+C to be able to click on the elements

Elements.mp4

As you can see, we have now got a class of icons on the chat input

• icon-3D60ES
  And so by clicking on different elements we can find their classes

Creating theme file 📃

To create a theme file, we need to go to the BD theme folder, there are two ways

1. Open it from Discord
   
   
   
2. Normal C:\Users\username\AppData\Roaming\BetterDiscord\themes
   After entering the theme folder, we need to create the theme file
   Note : Your theme file must have .theme
   Example : Amozesh.theme.css
   You can use css and sass to create the theme

Coding 💻

Well, now that we have learned everything and created the file, we will enter the file
You must put the following code in the beginning of your file code, otherwise the theme will not work

/**
  * @name Dark+ Theme Name
  * @author DevEvil#8745 Theme Author
  * @version Dark+1 Theme Version
  * @description Highly customized dark and purple theme for Discord  Theme Description
  * @authorId 468132563714703390 Theme Author Discord ID
  * @authorLink https://devevil.xyz Theme Author Link
  * @source https://github.com/DevEvil99/DarkPlus-Discord-Theme Source Code Link
  * @website https://devevil.xyz Website
  * @invite jsQ9UP7kCA Support Server
*/

Necessary

• @name
• @version
• @description
  

Now we write our first code
We copy the element and style it

Result

We made our own theme so easily 😀
There is a lot you can do with Discord, it depends on your taste. If you know CSS, you can do a lot of things such as changing icons, giving animation to the elements, changing the location of elements, and so on
Thank you for following me so far 😀❤

If you have a problem, question or need help, you can contact me in the following ways

• Email
• Discord : DevEvil#8745
• Discord Server
  
  

Download my themes :
Dark+
Ocean
Neptune

❤

یک داکیومنت ساخت تم دیسکورد برای شما 😀

آموزش ساخت تم برای دیسکورد به زبان فارسی
قبل از اینکه شروع کنیم باید بگم که من چیز هایی که خودم میدونم رو به شما دارم یاد میدم و ادعایی ندارم 😃❤
من تو نوشتن فارسی ضعیفم پس اگه غلط املایی یا چیزی پیدا کردید تعجب نکنید ☺😅

پیش نیاز ها 📃

• بتر دیسکورد | BetterDiscord
• یک نرم افزار ادیت کد | پیشنهاد من : Visual Studio Code
  بتر دیسکورد چیه ؟ بتر دیسکورد (بی دی) به طور مختصر یک کلاینت برای دیسکورد که بما اجازه میده بتونیم روی دیسکورد تم و پلاگاین نصب کنیم
  

آموزش نصب بتر دیسکورد ❗

how-to-download-bd.mp4

قبل از اینکه شروع کنیم ❗

برای اینکه ما تم بسازیم باید به المنت های دیسکورد استایل بدیم حالا چجوری این المنت ها رو پیدا کنیم 🤔
برای پیدا کردن المنت ها باید دکمه های زیر را بزنیم

• Windows : Ctrl+Shift+I
  
• Mac : ⌥+⌘+I
  بعد از زدن این دکمه ها صفحه ی inspector برای شما باز میشه

وقتی صفحه باز شد دکمه ی Ctrl+Shift+C رو باید بزنید تا بتونید روی المنت ها کلیک کنید

Elements.mp4

همینطور که دیدید الان ما کلاس آیکون های روی چت اینپت رو بدست آوردیم

• icon-3D60ES
  و همینجوری با کلیک کردن روی المنت های مختلف میتونیم کلاس هاشون رو پیدا کنیم
  

ساخت فایل تم 📃

برای ساخت فایل تم باید به پوشه ی تم بی دی بریم، دو تا را وجود داره

1. باز کردن از توی دیسکورد
   
   
2. معمولی C:\Users\username\AppData\Roaming\BetterDiscord\themes بعد از وارد شدن به پوشه ی تم باید فایل تم رو بسازیم
   توجه : فایل تم شما باید .theme رو داشته باشه
   مثال : Amozesh.theme.css
   برای ساختن تم میتونید از css و sass استفاده کنید
   

کد نویسی 💻

خب الان که همچی رو یاد گرفتیم و فایل رو ساختیم وارد فایل میشیم

شما باید باید باید در اول فایل خودتون کد زیر رو قرار بدید وگرنه تم کار نمیکنه

/**
  * @name Dark+ اسم تم
  * @author DevEvil#8745 اسم سازنده
  * @version Dark+1 ورژن تم
  * @description Highly customized dark and purple theme for Discord توضیحات
  * @authorId 468132563714703390 آیدی دیسکورد سازنده
  * @authorLink https://devevil.xyz لینک سازنده
  * @source https://github.com/DevEvil99/DarkPlus-Discord-Theme لینک سورس کد
  * @website https://devevil.xyz وبسایت
  * @invite jsQ9UP7kCA لینک ساپورت سرور
*/

ضروری

• @name
• @version
• @description
  حالا که فایل رو آماده کردیم اولین کد خودمون رو مینویسیم
  المنت موردنظر رو کپی میکنیم و بهش استایل میدیم
  

نتیجه

به همین راحتی تم خودمون رو ساختیم 😀

خیلی کار میتونین با دیسکورد بکنید بستگی به سلیقتون داره اگه سی اس اس رو بلد باشید میتونید خیلی کار ها مثل عوض کردن آیکون ها ، متحرک کردن المنت ها ، عوض کردن جای المنت و ... انجام بدید

مرسی که تا اینجا منو دنبال کردید 😀❤

اگه مشکلی ، سوالی یا کمکی خواستید میتونید از راه های زیر با من در ارتباط باشید

• Email
• Discord : DevEvil#8745
• Discord Server

دانلود تم های من :
Dark+
Ocean
Neptune

❤