Structure of themes and theme components

Discourse now supports native themes that can be sourced from a remote git repository, or from a .tar.gz archive. Recently we also added support for branches and private repositories.

An example theme is at: https://github.com/SamSaffron/discourse-simple-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.

image

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

scss/{anything}.yml
scss/{anything}/{anything}/{anything}.scss

assets/{asset_filename}

settings.yml

Any of these files :arrow_up: 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.

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: 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.

Further reading

Check out the other articles with the #themes tag.

:information_source: See also:

42 Likes