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 😃❤
- 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
how-to-download-bd.mp4
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
To create a theme file, we need to go to the BD theme folder, there are two ways
- Open it from Discord
- 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 usecss
andsass
to create the theme
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
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
- 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
و همینجوری با کلیک کردن روی المنت های مختلف میتونیم کلاس هاشون رو پیدا کنیم
برای ساخت فایل تم باید به پوشه ی تم بی دی بریم، دو تا را وجود داره
- باز کردن از توی دیسکورد
- معمولی
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
حالا که فایل رو آماده کردیم اولین کد خودمون رو مینویسیم
المنت موردنظر رو کپی میکنیم و بهش استایل میدیم
به همین راحتی تم خودمون رو ساختیم 😀
خیلی کار میتونین با دیسکورد بکنید بستگی به سلیقتون داره اگه سی اس اس رو بلد باشید میتونید خیلی کار ها مثل عوض کردن آیکون ها ، متحرک کردن المنت ها ، عوض کردن جای المنت و ... انجام بدید
مرسی که تا اینجا منو دنبال کردید 😀❤
اگه مشکلی ، سوالی یا کمکی خواستید میتونید از راه های زیر با من در ارتباط باشید
- Discord : DevEvil#8745
- Discord Server
دانلود تم های من :
Dark+
Ocean
Neptune
❤