Discourse has had support for custom themes for almost a year now, though we’ve been iteratively rolling out many improvements since then. There’s now a solid collection of themes documentation to dig into, as well as a growing collection of themes to use as-is or study and borrow from.
We feel it’s high time that we raise more awareness about Discourse’s many theming capabilities which are quickly reaching maturity. In the months to come we will be doing a series of theme contests to put this maturity claim to the test.
First up: Color Schemes
Our first challenge requires nothing more than a keen sense for color combinations. No HTML or CSS should be used.
How to participate
Make a new color scheme
Go to theme-creator.discourse.org, “My Themes”, create a New Theme and tweak the colors until you’ve arrived at a new look.
Make your theme publicly viewable by using the Share button at the bottom of of the customizer:
To share your themes you will need to be a member of the @theme_authors team. If you are not a member request entry here!
Repeat!
You can submit up to 10 different color schemes, so why stop at 1?
Submit
Once you’ve arrived at 1-10 color schemes you’re happy with, compile a list of their public URLs and email your submission to team+contest@discourse.org with the title “Discourse Theme Contest by {meta-username}”.
Prizes
The Discourse team will select three color scheme submissions as the top 3 winners. One author can not win more than one prize.
First place: $500 and color scheme will be bundled with Discourse core
Second place: $350
Third place: $250
Other color schemes may also get included in core but only first place is guaranteed.
Prize money is payable by PayPal or TransferWise. Please let us know if neither of these payment options will work for you.
Timeline
The deadline for submission is in two weeks from now: June 22, 2018 5:00 PM
Ownership
Please note that by sharing your theme through theme-creator.discourse.org you are giving Discourse (CDCK Inc.) non-exclusive rights to your work. We reserve the right to publish any submitted theme in the public domain with appropriate attribution.
Good question. I changed it to “No HTML or CSS should be used” to clarify. We want this to be all about colour schemes for this initial round of customisations, so no extra customisations will be accepted.
I’m pretty sure “public domain” doesn’t have support for requiring attribution. Wouldn’t it just be simpler to have the themes licensed CC-BY-NC-SA, like all the normal forum submissions?
[please put a little bit more effort into your submissions than this! for example, I could have fixed the “Activity” column but decided not to for time reasons]
Why are some of the font colors set automatically? Like on the main page they seem to be different shades of the background color, which is a weird choice as that makes a lot of the text really hard to read. Why aren’t we able to set these values through the theming interface? Must they be overridden in CSS?
I have found this also - some colour combinations are quite difficult to put into place without editing html/css manually of which you ask not to do for this contest.
Despite what it seems, I suspect those are lighter versions of the text color. I’m guessing your text color is actually a very dark blue.
For example, #0a061d looks like this:
but when it’s lightened 50% in SASS it looks like this:
I guess the simplest explanation is that there a lot of different ways to mix colors to get something that looks like black, and that impacts what the color looks like when it’s lightened.
I made the primary text color a black from brown, so when lightened it looks brown
Definitely feel free to report any issues here, some of them might be chalked up to the difficulty of making a small set of colors work universally no matter what you set them to… but I’m sure there’s room to improve as well.
Agreement on the inherent light/dark issues. Some elements seem to be hardcoded based on the master values, or iterated off of them which amounts to the same effect.
I think that the major value of this competion will not be the results, but information on the friction to creating good results.
One clear barrier to creating good color only options for this first iteration is that the discourse logo text is hardcoded as black in the icon. That eliminates half of the spectrum for backgrounds on the header (light only) so I created a custom png with a little white border around the text elements so that folk can experiment with if they want to go the other way.
Nothing great. A real version would want to expand the size of the png and allow more border, a real real version would be in svg or html and allow changeing of the text color, but this border trick will at least give folk an option for working with banner headers that use dark colors ( a common desire because usually you want a light background to your more important text content).
- this was what my limited skills could come up with - but had fun while trying…
