Canvas provides a flexible template that allows you to create custom themes with less coding. Easily adjust properties and configuration values to tailor a theme to your needs.
Example views
The base template retains default values and remains neutral in design.
Synchronize the theme with your Discourse instance using the discourse_theme gem.
Go to the admin backend and manually adjust these theme component settings: Category Banners
Plugin outlet → above-main-container Tag Banners
Show below site header → uncheck
Show above main container → check
Edit scss/properties.scss to define values for custom properties
Edit about.json to add assets, color schemes and more theme components
A closer look at the setup
The Canvas Theme template only extends the default theme skeleton with bundling a few theme components and adding some ready-made style files. The actual features are handled by a separate theme component Canvas Settings. This component serves two functions:
It assigns custom properties that can be used with the template. A table listing all properties can be found in the template’s Readme file.
This split setup allows you to create a theme using the Canvas template, while still benefiting from ongoing fixes and updates provided through the component.
Example themes
You can review the code of the shared example views or install them as your starter theme from these repositories:
The settings are on the theme component installed as Canvas Settings. It’s maybe a bit misleading that settings are always named Theme Settings on the ui, also on theme components.
The category banner is also shown in the same place, above the sidebar. Latest topics, Hot topics are correctly shown in the main column.
I’m guessing it’s not a goal of the theme to fully cover the admin UI, however, the light and dark Editor color palettes have the admin sidebar looking quite different. I am curious if it is possible to harmonize with the non-admin sidebar.
The theme is meant to show banners next to the sidebar, using the above-main-container outlet. The Extra-Banners component uses that outlet by default, but the two components for Category and Tag banners are by default rendered below the header. I wouldn’t want to fork these components, just to set a different default outlet… That’s why I put these instructions:
But if that’s easy to miss, maybe there’s a better way to put it?
Yeah, that’s easy enough and seems a good approach for this theme. I just added a commit!
Ah yes, I see how we got here. We don’t necessarily want to change the defaults in the category/tag banners components, don’t want to fork them either. Tricky to fix, let’s leave it as is for now and see if others run into the same issue.
Could these instructions be elaborated a bit? Is it not possible to just install from the admin UI? Thx
EDIT: I installed via the admin UI and it seems to be working except there doesn’t seem to be anywhere to edit scss now
EDIT: nevermind, I see that is probably expected and you’re showing to edit the theme files directly. I wonder if it could be on the roadmap for this to happen via the admin ui? Like, have a variables editor same as you have a settings editor
And then declare custom properties on it’s CSS file. You could either look up properties on the Readme file. Or copy the contents of properties.scss from the theme repo.
I don’t see a plus on mobile on GitHub. May need to try the command lines when Home.
All I see in GitHub on dashboard is option to create a new repo but no claim ne option. I am on free account so not sure if that might have something to do with it.
It’s limited compared to declaring custom variables on the stylesheet. But it lets you tinker with a few different looks. Curious to hear if that works!
A huge thank you to Discourse for sponsoring the development of this project!
