Discourse supports native themes that can be sourced from a .tar.gz
archive or from a remote git repository including private repositories.
An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme
The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest.
To create a theme you need to follow a specific file structure. These are the files you may include:
about.json (required)
common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss
desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html
mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html
locales/en.yml
locales/{locale}.yml
stylesheets/{anything}/{anything}/{anything}.scss
javascripts/{anything}.js
javascripts/{anything}.hbs
javascripts/{anything}.hbr
assets/{asset_filename}
settings.yml
Any of these files are optional, so you only need to create the ones you need.
For those looking to split theme SCSS into multiple files, that’s now possible.
For those looking to split up theme into multiple JS files, just add the JS files you want into the javascripts directory.
The about.json
file structure is:
{
"name": "My Theme",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"variable-name": "assets/my-asset.jpg"
},
"color_schemes": {
"My Colour Scheme": {
"primary": "222222",
}
}
}
Instructions on how to add settings to your theme available here: Add settings to your Discourse theme.
To tell Discourse that you are going to add a theme component and not a full theme just add the line "component": true
to the about.json
file
The file structure matches the theme custom CSS / HTML.
Further reading
Check out the other articles with the #themes::tag tag.
See also:
- Beginner's guide to developing Discourse Themes
- Install the Discourse Theme CLI console app to help you build themes
- Include assets (e.g. images, fonts) in themes and components
Last Reviewed by @SaraDev on 2022-08-15T21:00:00Z
This document is version controlled - suggest changes on github.
Last edited by @JammyDodger 2024-05-26T12:27:32Z
Check document
Perform check on document: