This is not supposed to be used as a theme by itself.
This is a theme component that’s supposed to handle the background only. It’s supposed to be incorporated into your theme design.
Repo: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component
This component uses Mario Klingemann’s StackBlur library (2kb gzipped - MIT license) to generate high scroll performance blurred backgrounds based on an image you select in a <canvas> element.
Examples: (these are compressed so they have artifacts - the backgrounds are smooth)
If I use this photo:
Then the resulting Discourse background would look like this:
And on mobile
More samples with other images:
The quality of the image you use does not really matter because the blur is very forgiving so I recommend highly compressed jpgs no larger than 1080p - All you want is the colors.
Installation
Install the repo as you would with any other theme component:
Once that’s done follow these steps:
1- Create a new theme
2- Name it whatever you want
3- Add this in the common header section:
<canvas
id="background_b"
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT"
></canvas>
4- Change BACKGROUND_URL_GOES HERE to the url of your image
(Has to be either hosted on your domain or on a domain with correct CORS set up)
5- Change BLUR_AMOUNT to the desired amount of blur (0 - 180) higher means more blur.
5- Add StackBlur backgrounds as a theme component under your newly created theme.
Important
The demo samples use the “Simple Dark” color scheme
You may have noticed the slight dark background behind the topic list.
This is not a part of the theme component
That is achieved with the the following CSS:
#main-outlet {
background: rgba(0, 0, 0, .5);
padding-left: 2em;
padding-right: 2em;
}
Also, the default mobile theme adds a solid color background to the <body> element so you would need to remove that if you want the blurred background to show on mobiles. You can do that like so:
.mobile-view {
body {
background: none;
}
}
