Beginner's guide to using Discourse Themes

Johani · July 7, 2020, 3:50pm

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read.

What are themes and theme components?

A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features.

Let’s start with themes.

Themes

In general, themes are not supposed to be compatible with each other because they are essentially different standalone designs. Think of themes like skins, or like launchers on Android. You can have multiple launchers installed but you can't use two of them at the same time. Your default Discourse installation comes with two themes

Default

and Dark

Let’s say that’s not enough for you and you want MOAR. Well, you can install additional themes fairly easily. Here are a couple of examples of free themes available here on Meta.

Material Design Theme

Sam’s personal “minimal” topic list design

Vincent

As you can see, your site can look dramatically different based on what theme you select; however, that’s not the end of it. On top of themes, Discourse also supports theme components.

Theme Components

We use the phrase theme-component to describe packages that are more geared towards customising one aspect of Discourse. Because of their narrowed focus, theme components are almost always compatible with each other. This means that you can have multiple theme components running at the same time under any theme. You can think of theme components like apps on your phone.

As always, examples are the best way to describe something, so here are a few examples of theme components available here on Meta

Discourse Category Banners

This theme component takes your existing category details, including name, description, and color and generates a banner at the top of the relevant category pages.

Brand header theme component

This theme component adds an extra top header for branding with your logo, navigation links, and social icons for both mobile and desktop views. Brand logo can be a image or text.

Tiles Image Gallery

A lightweight theme component that adds image gallery functionality to Discourse posts.

As you can see, theme components have a much narrower focus. As such, they are compatible with each other in most cases.

Now you have a general idea of what Discourse themes and theme components are. Let’s dig a little deeper.

Discourse Theme Interface

Let’s look at the interface for themes. Go to your.site.com/admin/customize/themes and you should see something like this:

This is the default theme interface in Discourse. You can do a number of things here:

Set the default active theme
Choose which themes to make available to your users
Create new themes and theme components
Import new themes and theme components
Add theme components to a theme
Modify color schemes
Change theme settings
Preview a theme

Let’s go through these one by one.

Set the default active theme

The small check mark next to the default theme name indicates that this is the active theme on your site.

Now let’s change the active theme to Dark. Click on the Dark theme and you should see this:

The active theme on your site will be set to Dark. This means that everyone who visits your site will see this:

And the check mark would then move to be next to the Dark theme name indicating that it is the active theme

Choose which themes to make available to your users

It’s nice to be able to set a theme for your site, but you know what’s nicer? Letting your users decide. Discourse allows you to offer different themes to your users allowing them to set the theme according to their preferences. Their choice is limited to their own account and won’t affect your active theme choice or the choices of the other users.

For example, you can set the active theme to the default theme (light) but offer the dark theme as an option. Let’s try and do that now. In the theme interface.

All active themes you have, whether it’s the default theme set on your site or any themes you’ve marked as user-selectable will show here:

However only the default theme will have the green check mark.

Now, let’s try to make the Red theme user-selectable for example.

All you need to do is click on it, and then tick the box that says “Theme can be selected by users”

That’s it! You’ll notice that it automatically gets moved from the inactive theme list to the active theme list

and your users will be able to select whatever theme they prefer by going to

your.site.com/my/preferences/interface

Create new themes and theme components

To create a new theme or theme component, click either of the two “Install” buttons

You’ll then get dialog box. Select the “Create new” option on the lefthand menu. You will need to provide a name for what you want to create and decide whether it’s a theme or theme component.

We’ve sort of covered the basics of what themes and theme components are. If you remember, a theme-component is usually focused on modifying one area of Discourse. Whereas a theme generally covers a number of things. You should also note that a theme can have any number of theme components under it, while a theme-component cannot. Don’t stress about this for now, a more detailed explanation of this relationship will follow later.

Now, let’s say you’ve decided on the name and decided to make it a theme. Well, once you hit the “Create” button, the theme will be created and you would then be able to

Change the name of the theme / theme component
Set or change a color scheme for the theme
Add html / css / js to theme / theme component
Add files or uploads to the theme
Add child components to your theme

Specific customisations are outside of the scope of this guide and so I’ll stop here for this point.

The interface for adding html / css / js looks like this (once you click on #3 above)

Import new themes and theme components

We already have a guide for how to import themes, but I’m including how to do that in here since this guide is supposed to cover all the basics.

To import a theme or theme component, click either of the two “Install” buttons

The “Popular” section will allow you to preview/install from a list of our most popular themes and components.

You can also import theme files from your device or via a the theme repository link. The repository link for each theme is provided by the author on the theme topic. Once you import a theme, all the things we discussed earlier will apply to it. You can set it as default, make it user-selectable and so on.

If you import a theme component, you can also add it to any of your themes. This is covered in detail in the next section

Add theme components to a theme

Let’s say you like the Discourse category banners theme component and want to use it. You would proceed as follows

import the theme from the repository like we discussed above
add it as a theme component to your active / user-selectable themes

You can do that like so:

After importing the component, go to the theme you want to add it to and look for the “Included components” section

This list will show all installed theme components. From there you can add theme components to the theme. Adding the Versatile Banner theme component would look like so

A similar, “Include component on these themes” option exists from an individual component’s page. This allows you to add a component to multiple themes at once

That’s pretty much it. Discourse category banners is now an active component of the default theme. If you also want it to be added to the Dark theme, you would repeat the process of adding the theme component for the Dark theme.

If you’ve set the Dark theme to user-selectable and added the Discourse category banners theme component to it as well, users who select the Dark theme as their active theme will also get the Discourse category banners theme component as well since it’s a “child-theme” of the Dark theme.

You can have an unlimited number of theme components under a theme and like we discussed earlier, they’re usually compatible with each other. So you can do something like this:

And all those components would be active on the default theme at the same time.

Modify color schemes

A color scheme is a palette of colors that you choose to generate the color of the elements in a theme. I won’t go into a lot of details here but will show you how to use color schemes.

Navigate to your.site.com/admin/customize/colors and you will see

From here you can edit color schemes or create new ones. To edit a color scheme, click on it and change the colors to your liking

To create a new color scheme click here

Once you’re done changing the colors, it’s now time to set the color scheme as active in either your active or user-selectable themes. To do so, go to the theme’s page and look here

Theme settings

Discourse themes can have settings. These settings are designed to be an easy way for you to configure a theme or theme component according to your needs. For example the Discourse Button Styles theme has a few settings to allow for easy customisation of how buttons look by simply changing a few values to your liking

Not all themes / theme components have settings but for those that do, they will always show up here. Settings will usually include instructions provided by author that help you determine what changes need to be made.

Previewing a theme

Sometimes you need to see what a theme looks like on your site before applying it. Discourse offers an easy way to preview themes without setting them as active.

While on a theme’s page, click here

and a new tab will open with a live preview of what the theme would look like on your site. You can navigate to different pages and see how everything looks like

the best part about previewing a theme is you can test out changes live without causing any problems on your site in case anything goes wrong.

Additional information

Safe-mode

Discourse has a built-in way to bypass the current active theme in case things go wrong. For example, a javascript error in a component’s code may cause your site to not work properly. To bypass the current active theme simply visit

your.site.com/safe-mode

You would then see

from there you can disable the current active theme, navigate to the theme page and either fix the problem or disable the theme for good.

Getting new themes

The most straightforward way to find new themes and theme components is to check the #theme category here on Meta.