# Canvas Theme Template
**URL:** https://meta.discourse.org/t/canvas-theme-template/352730
**Category:** Theme
**Created:** [February 17, 2025, 4:13pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730 "2025-02-17T16:13:06Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [February 17, 2025, 4:13pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/1 "2025-02-17T16:13:06Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Quick start your theme design with a prepared theme template. |
| 👥 | **Audience** | New developers that want to get started building themes for Discourse. Experienced developers that want to use a ready-made template. |
| 🛠 | **Repository** | [Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab](https://gitlab.com/manuelkostka/discourse/canvas/theme) |
| 👀 | **Preview** | [Canvas Themes](https://canvas.kostka.studio) |
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.
Minimal adjustments that modify a few custom properties and define a highlight color:
A design that integrates the Topic Cards component and custom styles for banners:
An elaborate theme that includes a custom font and unique color schemes:
A play on the former Central theme:
## Usage
* * *
1. [Clone the Theme Template](https://gitlab.com/manuelkostka/discourse/canvas/theme).
2. Synchronize the theme with your Discourse instance using the [discourse\_theme gem](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950).
3. 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_
4. Edit `scss/properties.scss` to define values for custom properties
5. 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](https://gitlab.com/manuelkostka/discourse/canvas/theme/-/blob/main/README.md).
- It declares default styles, along with a few optional styles that can be adjusted in the theme component settings.
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 preview shared example themes at [https://canvas.kostka.studio](https://canvas.kostka.studio). There’s a theme toggle at the bottom of the sidebar to change theme.
Review code of the shared example views or install them as your starter theme from these repositories:
- [Minimal theme example](https://gitlab.com/manuelkostka/discourse/canvas/theme-minimal)
- [Screen theme example](https://gitlab.com/manuelkostka/discourse/canvas/theme-screen)
- [Editor theme example](https://gitlab.com/manuelkostka/discourse/canvas/theme-editor)
- [Central theme example](https://gitlab.com/manuelkostka/discourse/canvas/theme-central)
* * *
> 🎉 A huge thank you to Discourse for sponsoring the development of this project!
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [February 18, 2025, 1:13pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/2 "2025-02-18T13:13:44Z")
> [@manuel](#):
>
> It declares default styles, along with a few optional styles that can be adjusted in the theme component settings.
Those theme settings don’t show up when I tried to install the example themes. Is that expected behavior?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [February 18, 2025, 1:23pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/3 "2025-02-18T13:23:15Z")
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.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [February 18, 2025, 1:25pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/4 "2025-02-18T13:25:14Z")
Found them in **Canvas Settings** component, thx!
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 20, 2025, 7:54pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/5 "2025-02-20T19:54:25Z")
Thanks so much for working on this @manuel.
I took the Editor version for a spin locally, it mostly works very well, but I noticed some small issues.
* * *
On a default install, without changing any settings, the tag label in the Extra Banners component shows up in the wrong place:
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.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [February 20, 2025, 10:24pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/6 "2025-02-20T22:24:39Z")
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:
> [@manuel](#):
>
> 1. 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_
But if that’s easy to miss, maybe there’s a better way to put it? 🤔
> [@pmusaraj](#):
>
> I am curious if it is possible to harmonize with the non-admin sidebar.
Yeah, that’s easy enough and seems a good approach for this theme. I just added a commit!
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 20, 2025, 10:29pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/7 "2025-02-20T22:29:11Z")
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.
Admin sidebar change looks good already, thanks!
---
### Author:  [@mk0r](https://meta.discourse.org/u/mk0r)
#### Post date: [February 23, 2025, 5:36pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/8 "2025-02-23T17:36:13Z")
Could these instructions be elaborated a bit? Is it not possible to just install from the admin UI? Thx 🙏🏽
> [@manuel](#):
>
> - [Clone the Theme Template](https://gitlab.com/manuelkostka/discourse/canvas/theme).
> - Synchronize the theme with your Discourse instance using the [discourse\_theme gem](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950)
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
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [February 23, 2025, 9:10pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/9 "2025-02-23T21:10:49Z")
I don’t know what’s on the core roadmap, but one thing you could do right now is create a new theme component right on the admin UI:
And then declare custom properties on it’s CSS file. You could either look up properties on the [Readme file](https://gitlab.com/manuelkostka/discourse/canvas/theme/-/blob/main/README.md). Or copy the contents of [properties.scss](https://gitlab.com/manuelkostka/discourse/canvas/theme/-/blob/main/scss/properties.scss) from the theme repo.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 4, 2025, 3:33am UTC](https://meta.discourse.org/t/canvas-theme-template/352730/10 "2025-03-04T03:33:41Z")
How do I clone this to Gihub? Still a bit on the green side 😉
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [March 4, 2025, 9:35am UTC](https://meta.discourse.org/t/canvas-theme-template/352730/11 "2025-03-04T09:35:31Z")
You could import it through the UI:
However, if you want to be able to sync changes, I believe you’d need to pull to a local clone and then push from it. Something like this:
1. Clone from GitLab
```plaintext
git clone "https://gitlab.com/manuelkostka/discourse/canvas/theme.git"
```
1. Set push URL to your GitHub repo
```plaintext
git remote set-url --push origin "git@github.com:Username/Reponame.git"
```
1. Then you can periodically fetch from GitLab and push to GitHub
```plaintext
git fetch -p origin
git push origin
```
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 4, 2025, 10:00am UTC](https://meta.discourse.org/t/canvas-theme-template/352730/12 "2025-03-04T10:00:28Z")
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.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [March 10, 2025, 7:57pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/13 "2025-03-10T19:57:45Z")
> [@mk0r](#):
>
> 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
I added a component that lets you define a few style variables and layout options right on the component ui:
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! 👀
> **[Manuel Kostka / Discourse / Canvas / Canvas Styles Component · GitLab](https://gitlab.com/manuelkostka/discourse/canvas/canvas-styles)**
>
> GitLab.com
---
### Author:  [@Aurora](https://meta.discourse.org/u/Aurora)
#### Post date: [April 14, 2025, 1:08pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/14 "2025-04-14T13:08:45Z")
> [@manuel](#):
>
> Screen theme example
I’m playing with it right now and I think it’s nice! Is there a way to reduce the line spacing of the menu - to make it more compact?
Also, I can’t scroll the solid sidebar, is this by mistake?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [April 14, 2025, 2:24pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/16 "2025-04-14T14:24:49Z")
> [@Aurora](#):
>
> Also, I can’t scroll the solid sidebar, is this by mistake?
I just adjusted the CSS styles for the solid sidebar, scrolling should work again!
However, the solid sidebar is just one of the options on the Styles component I mentioned on the post above. If you want to adjust more styles (like spacing the sidebar menu), you’d need to follow the approach explained above in [Usage](https://meta.discourse.org/t/canvas-theme-template/352730#p-1712673-usage-2) and [A closer look at the Setup](https://meta.discourse.org/t/canvas-theme-template/352730#p-1712673-a-closer-look-at-the-setup-3): Use your own stylesheet with CSS custom properties – in this case that would be `-d-sidebar-row-height`.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [May 27, 2025, 5:16pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/17 "2025-05-27T17:16:04Z")
> **[Manuel Kostka / Discourse / Canvas / Central Theme · GitLab](https://gitlab.com/manuelkostka/discourse/canvas/theme-central)**
>
> GitLab.com
I’ve put together a new example theme based on this template. As the name suggests, this one’s a tribute to the original Central theme! 🤗 🥳
I loved the layout and visual style of Central and I’ve been packaging some of its features into standalone components, like the [Custom User Menu](https://meta.discourse.org/t/custom-user-menu/367398) and several sidebar blocks.
I realized that with the sidebar and some styles, this template actually gets you a good way towards the original theme’s look and feel.
In any case, I’m not planning to fully re-build the Central theme.. but I might still experiment with a dedicated topic list style down the road. If you’re curious and want to take a look, the theme is also live here, select it using the sidebar theme toggle: [https://canvas.kostka.studio](https://canvas.kostka.studio)
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [May 27, 2025, 9:36pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/18 "2025-05-27T21:36:37Z")
Very nice. Thanks for sharing.
---
### Author:  [@kevin001](https://meta.discourse.org/u/kevin001)
#### Post date: [May 29, 2025, 2:32pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/19 "2025-05-29T14:32:29Z")
Thanks for sharing this template! The flexibility with components and the clean design make it really easy to customize. Looking forward to trying it out on my own instance.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [May 30, 2025, 3:04am UTC](https://meta.discourse.org/t/canvas-theme-template/352730/20 "2025-05-30T03:04:24Z")
Welcome to Discourse :discourse: !
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 23, 2026, 11:04pm UTC](https://meta.discourse.org/t/canvas-theme-template/352730/21 "2026-02-23T23:04:03Z")
With the Foundation update being the new default in the near future, will Canvas theme template be updated to use the same “foundations” (eh), or will it keep the same style it has now, very close to the current (soon old) Foundation theme?
[Next page](https://meta.discourse.org/t/canvas-theme-template/352730.md?page=2)