Color Scheme Contest (with Prizes!)

Color Scheme Contest

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 :rainbow:

Our first challenge requires nothing more than a keen sense for color combinations. No HTML or CSS should be used.

How to participate

  1. 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.

    (bonus points for accessible color schemes)

  2. Share

    Make your theme publicly viewable by using the Share button at the bottom of of the customizer:
    05
    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!

  3. Repeat!

    You can submit up to 10 different color schemes, so why stop at 1?

  4. 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.

41 Likes

Not required, or not allowed? Can we customize html and css if we want?

2 Likes

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.

15 Likes

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?

I get this notice:

To share your themes with others you must belong to the @theme-authors group on meta.discourse.org. You can request membership here.

Yep, users can request the membership (well, I add you to the group now), I will update the OP.

2 Likes

Even then I should be a part of the theme group I get this notice when trying to share

1 Like

Log out from theme creator and log in again and you should be good to go.

9 Likes

[this is a non-competing entry]

What could be more keen than the good old Windows 3.1 Hot Dog Stand?

[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]

19 Likes

…? How should this be read?

Im not sure?

Like in: what kind of crap people are adding or - what are you saying…?

Anyway feel free to tweak the following

Green is the new black theme by frold
33

Prince the Artist formerly known As by frold
58

Purple Rain by frold
59

Miss Piggy Theme by frold
16

Heaven and earth theme by frold
08

Blue is the sky limit theme by frold
44

Have fun :smiley: - this was what my limited skills could come up with - but had fun while trying…

9 Likes

I present to you all:

Skye

7 Likes

If this is useful to anyone in the context of this competition, I’ve put together a Discourse design template for Sketch:

(using this you can quickly iterate on colours etc.)

2 Likes

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?

Capture3

10 Likes

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.

8 Likes

This is fair feedback, I think @awesomerobot may be able to help with guidance here.

3 Likes

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:

00%20PM

but when it’s lightened 50% in SASS it looks like this:

29%20PM

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 intentionally used that in my Apricot theme

I made the primary text color a black from brown, so when lightened it looks brown

22%20PM

43%20PM

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.

13 Likes

Hey folk,

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).

So here is an element for experimentation.

discourse_outline

2 Likes

kris I like the apricot theme, very clever.

Thanks Dražen! We definitely need these sorts of higher level templates to iterate on.