Daemonite Material Theme

(Taylor) #46

@modius, at the moment it looks like using the old icon render works. Here’s the code if you want to try it out in the </head> section of a theme component:

<script type="text/discourse-plugin" version="0.8">
    const h = require("virtual-dom").h;
    // Support for font awesome icons
    function faClasses(icon, params) {
      let classNames = `fa fa-${icon.replacementId || icon.id} d-icon d-icon-${
      if (params) {
        if (params.modifier) {
          classNames += " fa-" + params.modifier;
        if (params["class"]) {
          classNames += " " + params["class"];
      return classNames;
    // default resolver is font awesome
      name: "font-awesome",
      string(icon, params) {
        let tagName = params.tagName || "i";
        let html = `<${tagName} class='${faClasses(icon, params)}'`;
        if (params.title) {
          html += ` title='${I18n.t(params.title).replace(/'/g, "&#39;")}'`;
        if (params.label) {
          html += " aria-hidden='true'";
        html += `></${tagName}>`;
        if (params.label) {
          html += `<span class='sr-only'>${params.label}</span>`;
        return html;
      node(icon, params) {
        let tagName = params.tagName || "i";
        const properties = {
          className: faClasses(icon, params),
          attributes: { "aria-hidden": true }
        if (params.title) {
          properties.attributes.title = params.title;
        if (params.label) {
          return h(tagName, properties, h("span.sr-only", I18n.t(params.label)));
        } else {
          return h(tagName, properties);

It looks like there still might be a few icons that aren’t rendering correctly (.fa-thumbtack is the notable one), but in any case, I think this might be one angle to look at.

(Merlls Rizzini) #47

For those who still wants this modification and bring back + icon, @angus made this one for me.

Thank you @modius and @sesemaya for such incredible theme. :wink:

@tshenry you’re an angel. :hugs:

(Maya) #48

Thanks @tshenry, that did the trick.

Although there are still a few icons that are not rendering correctly, they are because of naming changes in FontAwesome 5. For example, .fa-thumbtack in 5 was .fa-thumb-tack in 4. I will go through the changes and update theme CSS accordingly.

Thanks again for the workaround.

(Merlls Rizzini) #49

Still missing those icons. Collapse and Reorder categories.


(Eduardo Braga) #50

what happened?

(Jeff Atwood) #51

(Andreas Motl) #52

Dear @sesemaya,

first things first: Thank you so much for conceiving and maintaining this fantastic theme.

We would like to give it a ride in favor of the Material Design Stock Theme and in order to do so, tried to install a fresh instance of Discourse (2.2.0.beta7) just yesterday. We imported your theme directly from its GitHub URL GitHub - Daemonite/discourse-material-theme: Material Design for Discourse, thus using the current development head.

However, we found some layout/rendering glitches we would like to share with you:

1. Icons in category list slightly off


2. Icons inside chips slightly off

Topic list


Topic list hamburger menu


3. Checker marks for color selection slightly off inside “New Category” dialog


4. Padding between avatar icon and username too narrow on personal badge page

e.g. /badges/1/basic?username=andreas.motl

Do you have an idea what we might have done wrong or about any possible reasons why these things might happen? Maybe this also relates to Subcategories are slightly broken · Issue #3 · Daemonite/discourse-material-theme · GitHub in any way?

Thanks in advance for your help!

With kind regards,

(Andreas Motl) #53

Regarding the first two issues

Solution, kind of

Both things can be mitigated by touching the .d-icon class at runtime. While .d-icon elements originally get sized at about 0.76em, increasing this by 1.0em like



Will make things look more smooth again:


However, I wouldn’t know how to add this at “compile time”, i.e. to make it persistent. I just manipulated the CSS using Browser developer tools at runtime.

Nevertheless I wanted to share this insight with you, you might know way better which things to adjust appropriately.


You can usually override plugins and themes with your own CSS installed as a Theme Component. I do this all the time. Create a Theme Component, add the delta CSS and add the Component to the Theme.

(Maya) #55

Hi @Eduardo_Braga, this has been fixed in the latest version.

1 Like
(Maya) #56

Hi @amotl, all the above issues have been fixed in the latest version. Theme still has some other issues with beta7 and I’ll try to get them fixed. In the meantime, if you see any bugs, please feel free to post them here or in GitHub.

(Andreas Motl) #57

Hi @sesemaya, this works like a charm. Thank you so much!

Thanks, we’ve spotted one or two other minor things and will be happy to share them along with some adjustments we additionally made to tweak the theme further.

Thanks again for your quick response and keep up the spirit!

(Andreas Motl) #58

Hi @sesemaya,

We’ve put some of the issues we encountered on GitHub and hope you will appreciate our bug hunt:

Besides that, we added two theme components to apply further adjustments to some parts of the vanilla Daemonite Material Theme.

After putting everything together, the preliminary results can be viewed here:

Quote blueprint ;]

Discourse and its Daemonite Material theme are truly gems in their fields. Thank you so much for bringing them together as such an amazing tandem of carefully crafted software components.

We hope that our humble feedback can contribute to further maturing.

With kind regards,

Daemonite Material Theme: Ample layout adjustments
(Joe) split this topic #59

3 posts were merged into an existing topic: Daemonite Material Theme: Ample layout adjustments

Daemonite Material Theme: Ample layout adjustments


I’ve registered at your forums to see if the padding of hamburger menu items stays intact (it does not at my own installation, most propably because the strings being in polish language, which are usualy longer than the english ones… This results in having a scrollbar with just a few items in my H menu, so it looks ugly. Same situation for user dropdown menu)

Anyway, I went to https://meta.ip-tools.org and registered, and you seem to have some bugs on the account activation page (the one you land at after clicking activation link from an email)

I’m using Chromium 71.0.3578.98 and your site autodetected and autoset the language to polish. This is an actual screenshot:

As you can see there is some white space above the navigation bar, which results in the overlapping. It still works, but I bet you don’t want it to act like this. Must be the yellow menu component missing. :slight_smile:

Daemonite Material Theme: Ample layout adjustments
Daemonite Material Theme: Ample layout adjustments
Brand header theme component
(Andreas Motl) #61

Haven’t tried that workflow yet, thanks a bunch!

The other things regarding scrollbars would then be addressed to @sesemaya, right? The scrollbar issue reminds me of @codinghorror’s comment above:

1 Like
(Christian Grasser) #62

Can anyone help how I can change this header icons to black?
After using this theme the icons are not good to see.


(Chaboi 3000) #63

Have you tried adding a color scheme and then changing the CSS code? This code will revert back if you update, but for now I think it’s a good fix. I think you can also fork the repository and change it in GitHub. I’m not really sure.

(Christian Grasser) #64

Thanks but I am completly new to Discourse. Just set up my first site with it.
And tried this theme. So there is no official way to change this icons to black? The user icon is black. Only the search and menu icon is grey.

(Chaboi 3000) #65

Hmm. I actually don’t know about this. I haven’t used this theme. Maybe try asking someone who have used this theme? Also, do you have other themes installed with this theme?