Structure of themes and theme components

themes

(Sam Saffron) #1

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

assets/{asset_filename}

settings.yml

Any of these files :arrow_up: are optional, so you only need to create the ones you need.

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:


How to add settings to your Discourse theme
Alien Night Theme - A free Dark Theme for Discourse
How to create and share a color scheme
Allow users to select dark / light theme
About the theme category
Custom user fields show on Activity, but not Summary page
How to modify the header HTML, but still remaining the default founctions
Adding Unsolved button to top menu using custom HTML
Some basic questions about discourse and rails
Custom assets upload folder?
Add support for theme settings
Color Scheme Contest (with Prizes!)
Allowing users to control video play speed
How to add settings to your Discourse theme
Timefuser Theme
Do you have original customisations?
Compact member list
CSS Theme Contest (with Prizes!)
Push to digital ocean from command line and rebuild
A more robust ecosystem for creating, sharing and modifying themes
Create and share a font theme component
Battle Axe - A free theme by the Tappara.co hockey community
How to modify Login/Register Modal
Discourse deployment using github or bitbucket?
How to bring in Latest topics when using category boxes
Beginner's guide to using Discourse themes
Theme Developer Quick Reference Guide
How to remove sticky top bar?
Understanding the development/deployment process