Daemonite Material Theme

The Daemonites have released a brand new, native theme for the Discourse forum based on the Google Material design guidelines.

As Flash as a Rat with a Gold Tooth

There’s a lot of effort in Materializing a design that didn’t start out that way. We’re happy with the result.

Topic Preview Plugin Support

Colourful Sub-Categories

New Topic; with Inbox inspiration

Menus, Buttons and Material Icons

Why build “another” Material based theme?

Yep. There’s already a really cool Material Stock theme for Discourse available. It’s a bit different in places, and even includes a DARK mode.

Our forum has been running it’s own Material theme for some time. We’ve finally wrapped this up into the new Discourse Theme format for distribution. Plus as we use the theme as the foundation for some other Discourse related projects we need something within our immediate control.

Overall i think the only way we can describe the visual differences is that ours is more Material; covers more elements in the style guide, more accurately. That said, whether you like one or the other will probably boil down to personal preference – we make a few opinionated choices with respect to certain elements.

For reference, the theme is similar in approach to the Daemonite Material for Bootstrap 4 project:

While Discourse is not Bootstrap-based, we do adhere to the same Material principals advocated in that design project.

You can see the theme running live at our Labs forum:

Enjoy!

56 Likes

The new Material theme also works well with another theme we released earlier: the discourse-clipboard theme which adds a COPY TO CLIPBOARD feature for code blocks.

4 Likes

Awesome work!

Two things:

  • You can now include assets like fonts, so no need to use Google Fonts.

  • The horizontal scroll bar on code blocks is too prominent, maybe some ::-webkit-scrollbar CSS can help.

5 Likes

I’ve tried this theme with Firefox 54.0.
This is how it looks:


I think the problem is the height: 32px you set for .badge-wrapper.box span.badge-category-bg, .badge-wrapper.bullet span.badge-category-bg.
Removing the height should fix the problem.

Great theme anyway @modius! :thumbsup:

5 Likes

If I had to guess, you may need to try a different tag style.

:raising_hand_man:t4:If you can fix, submit a pr to the theme repo

2 Likes

Thanks for pointing out the including assets feature, I’m just a bit afraid that we will need to manually track when new icons have been added to Material Icons or Roboto has been updated and then update the theme accordingly if we go for this option. Although neither are updated frequently, using Google Fonts just seems to have one fewer thing to worry about.

We will have a crack at this. :crossed_fingers:

2 Likes

Thanks for the feedback.

I had a look of this in Firefox. In fact, if you make any changes that has something to do with the box model (height, margin, width, etc.) in the Inspector, it seems to fix the problem.

Since badges are now display: inline-flex;, maybe we don’t need to absolute position badge-category-bg or badge-category-parent-bg anymore.

2 Likes

getting this bug when i have discourse formatting toolbar installed

Apologies if this is a ridiculous question, but I really cannot figure out how to get the images showing on the front page when using this theme. As in, on the first screenshot shown, every topic has an image associated with it. I’m trying to make this happen on my install of Discourse and testing by creating posts with images - but no image comes through to the front page.

Is there some setting that makes that work?

Many thanks.

I think you’re looking at the topic preview plugin…

3 Likes

Thanks so much! That’s exactly what I was after. And in case anybody is following this thread later the link to installing a plugin is here: Install Plugins in Discourse and the github url for topic preview to show thumbnails of images to go with a topic is here: https://github.com/angusmcleod/discourse-topic-previews

Hi, I am seeing issues on mobile where some buttons and text not reaponivw. See the “Unpinned” button and adjacent text causing horizontal scrolling and messing with the responsiveness.

3 Likes

Incredible news! The Daemonite Material Discourse theme has been overhauled for use with Discourse v2 BETA!

https://github.com/Daemonite/discourse-material-theme

You can see it in action here:

Enjoy!

10 Likes

thanks for the update, the theme doesn’t work properly for rtl direction. is it easy to adopt it for rtl?

The log in and sign up buttons are messed up in Firefox

image

Other than that, it looks really good!

Hi @notriddle, thanks for the bug report, this should have been fixed by the latest update.

@modius , @sesemaya I am running the Material Design Stock Theme, I like the layout of that theme, but like elements of your theme as well, especially the log in and sign up buttons, and category “pill” buttons. Is there a way to add those in to my current theme?

I tried via css with variations on &.sign-up-button {
@include material-icons(‘person_add’);

but that didn’t work. Any ideas?

So, the category buttons, and making login and signup buttons font awesome…

The biggest thing I want to keep is the + button for new topics on the bottom right.

Funnily enough we removed the + on account of it being awkward to get it “right” in all the places it would sit. And while it works in a mobile view it looks a little odd in the desktop view; or at least it takes a bit of getting used to.

@sesemaya what’s the chances of getting a + back as an optional child theme? Is this something we could support?

Anyhow, how would I import some of the features of your theme into the material design theme?