Step 4: Auto-updating and splitting the theme

Writing and distributing a theme as a single file is fine for simple themes, but becomes more difficult to manage as the theme grows.

  1. A long file is harder to navigate and edit.
  2. Users need to redownload the theme manually when it is updated, which may be often during development and maintenance.

To solve both of these issues, we can split the CSS among many files, and use strategies to auto-update the themes for users.

icon BetterDiscord

  1. Create your subfile, eg. innerworkings.css.
  2. Put your styles into innerworkings.css.
  3. In *.theme.css, immediately following the meta, add the following line (replacing the URL as required): 
    @import url("https://accountname.github.io/MyTheme/innerworkings.css");
  4. Commit and push the changes, and wait a few minutes (usually under 2 mins) for GitHub Pages to re-generate.

Now, toggling the theme in Settings > Themes will load innerworkings.css without needing to redownload the *.theme.css file. Repeat for as many subfiles as you like.

icon Replugged

Splitting the theme
  1. Create your subfile, eg. innerworkings.css.
  2. Put your styles into innerworkings.css.
  3. At the top of main.css, add an import for innerworkings.css: 
    @import url("innerworkings.css");
Auto-updating
  1. Install npm and pnpm.
  2. Move your theme folder to another location outside of the Replugged themes folder, as this will interfere with Replugged’s addon updater.
  3. Update your manifest.json to the following: 
    {
 "id": "com.example.mytheme",
 "name": "My Theme",
 "author": {
     "name": "My Name",
     "github": "AccountName"
 },
 "description": "This is my theme. There are many like it, but this one is mine.",
 "version": "1.0.0",
 "license": "MIT",
 "type": "replugged-theme",
 "updater": {
     "type": "github",
     "id": "AccountName/MyTheme"
 },
 "source": "https://github.com/AccountName/MyTheme"
}
  4. From the Replugged theme template, add the following to your theme folder:
    1. .github/workflows/release.yml - keep the folder structure intact too.
    2. package.json - feel free to edit the details, but it should work as-is.
    3. .gitignore
  5. Run pnpm install in console.
  6. When you have a new version of the theme ready to release, use pnpm run publish in console.

icon Vencord

Vencord users can enjoy the benefit of auto-updating by using the Online Themes feature instead of Local Themes. However, it is still recommended to split the theme for the sake of maintainability, using the same steps as BetterDiscord above.