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:
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.
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.
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.
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.
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.
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.
@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?
If you can fix, submit a pr to the theme repo
