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] Night mode: [zoom.dark.2] Cosy grey: [zoom.grey.2] 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] 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] The topic list uses 1-line rows when possible, with tiger striping. Heat map elements look more like fire. [topic-list.light] [topic-list.dark.2] User / notification menu: [light-theme.tk] Clearer nesting of embedded posts: [embedded-post.light] A user info card and link preview: [discobot-dark] 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.

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: Install Stylus, if you don’t already have it. With a Discourse site open, click on the Stylus icon. Under “Write style for”, click “this-site.tld”. Add a theme title. Paste in the contents of the matching CSS file linked below. Ideally, do the style.css file first, since the others depend on it. Save. Repeat for the other files, one per theme. Turn on base theme and one of the other themes. Turn off the other theme(s). https://github.com/ToyKeeper/blf-themes 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.

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:

This is all still in progress, but I started adding support for the chat widget… [chat.dark] [chat.light]

[image] ToyKeeper: 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. 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.

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.

Do it, get it in the GitHub can!!

where did this get to? Don’t let this great work go uncompleted and unshared.

[image] ToyKeeper: Too plain. btw, this kind of the point of the default theme - it’s there to build upon. [image] ToyKeeper: Too much empty space. Click/touch targets are partly the reason for this - don’t underestimate the benefit of spacing when you are trying to hit a specific control with your thumb!

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

Development

merefield (Robert) March 14, 2023, 8:53am 2

Really unique, great work!

(Every theme showcase should feature Chatbot btw )

Topic		Replies	Views
Native theme support Feature rfc	24	16561	April 12, 2017
CDCK should develop new default Discourse themes on a regular basis to keep it looking current Feature	19	3028	February 5, 2024
Relative lack of themes - am I missing something? Community Building	21	3035	May 5, 2021
Discourse theme option Feature	2	669	October 12, 2023
[HIRING] : Custom Discourse Theme Marketplace	2	1053	July 26, 2018

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

Related topics