Deprecated in favour of my create-bd-theme CLI.
Quick template to create BetterDiscord themes using SCSS.
- Have NodeJS installed.
- Open a command prompt/terminal and use the following commands:
npm i -g degit
npx degit Gibbu/BDThemeTemplate <your project name>
- Example:
cd desktop && npx degit Gibbu/BDThemeTemplate CoolTheme
- Example:
cd <your project name>
npm i
- Open
scripts/config.json
and change thename
field to whatever your theme is called.- This will tell the other scripts what to output and log.
- Open
src/_theme.scss
and change the meta fields to fit your needs.- You can view all available meta fields HERE.
- Do the same with
dist/THEME.theme.css
.- Change the file name as well as this is what end users will be downloading to use your theme.
- Open
dist/THEME.theme.css
and change the@import url
to match your location.- Example:
@import url('https://discordstyles.github.io/SoftX/SoftX.css')
discordstyles
being the username,SoftX
being the repo andSoftX.css
being the file.
- Example:
You should be good to go. Now all you need to do is run the following command: npm run dev
.
And it will watch for any changes inside the src
folder and auto compile them to your BetterDiscord themes folder.
If you're wishing to publish your theme for others to use, there's one more step to do.
- Enable GitHub pages on your GitHub repository and set
deploy
as the target.
Now all you need to do is push your changes to the main
branch and GitHub actions will auto compile your src
folder to the deploy
branch.
This file should contain everything you need to personalise the compiler.
Property | Type | Description |
---|---|---|
compiler.prefix |
boolean | Run the CSS through the PostCSS autoprefixer. |
dev.target |
array | The target of the dev script to watch and autocompile. |
dev.output |
array | The path to which your file will compile to. Keeping this to "[ThemeName].theme.css" will usually be fine. |
build.target |
array | Much like dev.target , but will compile the _base.scss to not include the theme end users will download. Note: The last index of the array MUST be a file (ending with a file extension). |
build.output |
array | Again, much like dev.output but will compile to the local dist folder. Note: The compiler will auto create directories if not found. |