How to develop custom themes

themes

(Sam Saffron) #1

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

image

Note that Import and Export from a dcstyle file still exists.

image

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.

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

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

:warning: See also:


How to add settings to your Discourse theme
Alien Night Theme - A free Dark Theme for Discourse
Allow users to select dark / light theme
How to create and share a color scheme
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
Custom assets upload folder?
Color Scheme Contest (with Prizes!)
Some basic questions about discourse and rails
Add support for theme settings
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?
Compact member list
Do you have original customisations?
Understanding the development/deployment process
Beginner's guide to using Discourse themes
How to remove sticky top bar?
Allowing users to control video play speed
How to bring in Latest topics when using category boxes
How to add settings to your Discourse theme
Timefuser Theme