Discourse now supports native themes that can be sourced from a remote git repository. Recently we also added support for branches and private repositories.
Note that Import and Export from a dcstyle
file still exists.
An example theme is at: GitHub - SamSaffron/discourse-simple-theme: Sam's simple discourse theme
The theme will be synchronized to the git repository used (once a day), any changes made to the repository will be detected clicking 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
settings.yml
Any of these files are optional, so you only need to create the ones you need.
The about.json
file structure is:
{
"name": "The name of your theme",
"about_url": "http://somesite.com/about_your_theme",
"license_url": "http://somesite.com/license",
"assets": {
"font": "assets/some_font.woff2"
},
"color_schemes": {
"Scheme Name": {
"primary": "AAABBB"
}
}
}
Instructions on how to add settings to your theme available here: How to 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.
At the moment there is still no way to provide optional color schemes
Further reading
Check out the other articles with the #themes tag.
See also: