Writing a fancy theme ... worth sending upstream, or no?

Dev
1

Hello!

Last month, my favorite forum switched to Discourse. This was mostly an upgrade, but people complained* about the look and feel. So I decided to fix it, and ended up doing a major style revamp. Now I’m trying to decide if I should put in the effort to turn it into a proper theme and merge it upstream, or if that’s unrealistic.

I think people on other forums might also appreciate it as an alternative theme, but I don’t know how difficult it would be to get things merged. What I did deviates quite a bit from Discourse’s usual theme design… which is both part of the appeal and part of the difficulty.

It’s still in progress, but here are some screenshots:

It’s designed to make multiple color palettes relatively easy to make and switch between, and here are three which exist so far.

Day mode:

zoom.light.2
zoom.light.21111×1343 243 KB

Night mode:

zoom.dark.2
zoom.dark.21111×1343 230 KB

Cosy grey:

zoom.grey.2
zoom.grey.21111×1343 185 KB

Thread posts come in 4 flavors: Regular (grey with blue header), admin/moderator (green), thread author (cyan), and currently-logged-in user (purple or pink). All are easy to change.

topic-map.desktop
topic-map.desktop1013×956 173 KB

The editor’s preview and grippie match the “current user” style. Also, scrollbars match the page theme. The timeline is styled to look more like a scrollbar too.

editor.dark
editor.dark1111×1341 221 KB

The topic list uses 1-line rows when possible, with tiger striping. Heat map elements look more like fire.

topic-list.light
topic-list.light1111×1341 233 KB

topic-list.dark.2
topic-list.dark.21111×1341 389 KB

User / notification menu:

light-theme.tk
light-theme.tk1092×1239 296 KB

Clearer nesting of embedded posts:

embedded-post.light
embedded-post.light1083×1246 259 KB

A user info card and link preview:

discobot-dark
discobot-dark1111×1341 252 KB

For now, it’s just a big stylesheet override and a smaller stylesheet to define the colors. But if it’s feasible to get the theme accepted upstream, I could convert it to a proper Discourse theme.

12 Likes
2

Really unique, great work!

(Every theme showcase should feature Chatbot btw :wink: )

5 Likes
3

Oh, um, this is still in progress, but if anyone wants to try what I have so far… the easiest way is locally using a stylesheet override in the browser:

  1. Install Stylus, if you don’t already have it.
  2. With a Discourse site open, click on the Stylus icon.
  3. Under “Write style for”, click “this-site.tld”.
  4. Add a theme title.
  5. Paste in the contents of the matching CSS file linked below. Ideally, do the style.css file first, since the others depend on it.
  6. Save.
  7. Repeat for the other files, one per theme.
  8. Turn on base theme and one of the other themes. Turn off the other theme(s).

I’m still debating whether to convert it to an installable server-side theme. On the forum I made this for, the admin simply installed another instance of Sam’s Simple Theme and dropped this on top as stylesheet overrides… which works, but isn’t ideal.

1 Like
4

For context, here’s what people complained about in the default theme, and thus what I tried to fix:

  • Too plain.
  • Too much empty space.
  • Not enough info onscreen at once. They wanted higher information density.
  • Unclear sometimes what page elements can be clicked on… like the start/end dates in the timeline widget.
  • Unclear sometimes how page elements relate to each other… like posts, embedded posts, and quotes. Some people thought there weren’t enough visual cues to indicate the structure.
  • Not enough visual separation between page elements. Everything appeared to be printed on one continuous document.
  • People specifically requested 1-line topic list rows and tiger striping.

So I went for something more compact, more colorful, more three-dimensional, with more explicit visual structure… like a stack of cards instead of a single continuous document. Basically, the opposite of the flat minimalist style which has been popular lately.

Minimal themes are a good default since they’re practical, accessible, and neutral. But for people who want an alternative to that, I made something … different. :sweat_smile:

3 Likes
5

This is all still in progress, but I started adding support for the chat widget…

chat.dark
chat.dark565×633 65 KB

chat.light
chat.light563×632 71 KB

1 Like
6

great work. i love it.

1 Like
7

Awesome theme!

I’ve added you on the theme authors group, so you can create a topic for your theme under theme, which allows people to install it to their instances with a button press.

8 Likes
8

Thanks!

I’ve been out for a while with a cold, but that’s about over now, so hopefully soon I can start the process of making a proper theme instead of just a stylesheet override.

3 Likes
9

Do it, get it in the GitHub can!!

1 Like