Dark, Simplified, and Slightly More Spacious Discourse

dark-theme

(Joe Kelly) #1

3 reasons for posting:

  1. Dark themes can be much nicer on the eyes, particularly when you’re working at night.

  2. I noticed that “minimal” seems to be quite a big interest around here: I skimmed a couple of long topics recognizing the need to simplify the out-of-the-box version of Discourse here and here.

  3. I think “lack of breathing space” is one of the biggest problems with the out-of-the-box UX.

To be clear: this isn’t just a plug for my forum — it’s going to be a (competitive) beat-making community, which is a pretty niche thing… so unless you (somehow) happen to be into beat-making, it’s very probably not the community for you. :eggplant:

This is about the UX side of Discourse. I put a full day of work into clearing things up and making it all fit with the rest of our site, and I thought you might be interested to see and discuss the results. Most instances of Discourse probably don’t look like this.

So: good? / bad? / whatthe%@^£haveyoudoneyoufool?

http://talk.battleflips.com


(Jeff Atwood) #2

I eventually want meta to use a dark theme for a while so we can get all the bugs out around that. It generally works but there are a few edge cases we have not handled right.


(Joe Kelly) #3

Yep, there was a fair bit of hands-on CSS work to do to iron out the kinks.


(Pirat) #4

font poor
try Helvetica


(Joe Kelly) #5

Or maybe even Trebuchet MS if I’m feeling wild, right? :slight_smile:


(Anthony Giovannetti) #6

Gorgeous imho! Care to share any of your CSS?


(Joe Kelly) #7

Yeah man, no problem. I’ll share as much as you want, but there’s quite a lot of it. :wink:

The sharp colour scheme helps — that’s just our brand, and I brought it over from the main site. But the major difference-maker is in the extra padding and margins all over the place. You can make a big difference with little things like this:

#suggested-topics {
    margin-top: 60px;
}

That bit of extra space creates a much cleaner separation (and effortlessly processable distinction) between the topic body and outbound links, for example.


(Sam) #8

Looks really good!

Running a dark theme on my forum as well (albeit with much less deviation from the original theme); I think I’ve managed to catch any outstanding issues but I’m glad to have another site to compare to :smile: .


(Erlend Sogge Heggen) #10

I see you’ve hidden Views. :thumbsup:

Is there anything else you’ve changed about the “core UX” of Discourse?

[quote=“codinghorror, post:2, topic:28187, full:true”]
I eventually want meta to use a dark theme for a while so we can get all the bugs out around that. It generally works but there are a few edge cases we have not handled right.
[/quote]That sure would be lovely.


(Joe Kelly) #11

Yes, I hid Views for now because — until you’re a big established community where the Views stat might actually mean something — it doesn’t really provide users with any useful or encouraging information.

In the context of a small/starting community like this one, I think it’s unnecessary clutter, at best.

Possibly… tbh I can’t remember how it was before I started, you tell me! :wink:

I think I simplified the top menu by removing New, because New is largely redundant on a small forum when you’ve got • new badges next to topic titles. And I suppressed all the educational popups etc. because they’re not a good fit with this culture! I probably could’ve customised them, but it was quicker to just get rid.

Other than that, I was pretty happy and generally impressed with vanilla Discourse.