Customizing colors

[Biscuit]

The color palette options listed under Admin > Customize > Colors don’t include the grey colour that’s used for some key UI components, like the column headings, the new topic button and the search / hamburger icons:

Is this intentional or should an additional color selector be added for this? I appreciate this can probably be done with CSS, but feels like these key UI components should be covered on the COLOR page.

[awesomerobot (Kris)]

It’s intentional, the goal of the color configurator is to be a very low bar to customization. The color variables are run through some color transformations (we have ~25 colors that are determined from that core 10). Given that those 10 customizable variables are relatively reasonable, we also try to ensure that we’re keeping elements in decent contrast with each other.

This “EZ Themer” has worked fairly well for those who don’t want to touch any CSS at all, and we definitely need to hold on to that.

---

That being said, it could be interesting to have an “advanced mode” or a plugin(?) that allows for more finesse when editing colors…

Curious about what you’re trying to achieve: would simply editing all instances of that particular shade of gray be enough for you (wherever it applies, borders, buttons, text, etc)?

Any per-element finesse beyond changing a single color everywhere it occurs is a huge can of worms that’s better solved by writing some CSS.

[Biscuit]

Hey Kris, Thanks for the explanation.

@awesomerobot

Curious about what you’re trying to achieve:

Ideally:

• Would like the EZ Themer to cover the "New Topic button, “All Categories”, search & hamburger icons, as these are such prominent features. Even if one colour selection covers them all.

@awesomerobot

…would simply editing all instances of that particular shade of gray be enough for you (wherever it applies, borders, buttons, text, etc)?

hmmm… could create a problem with unread post titles, row headings and the thin lines between topics also being made more prominent, if they’re considered the same type of grey.

I appreciate that another user will want something slightly different, so the EZ Themer will never replace CSS.

[awesomerobot (Kris)]

@Biscuit

Would like the EZ Themer to cover the "New Topic button, “All Categories”, search & hamburger icons, as these are such prominent features. Even if one colour selection covers them all.

Thinking about it a little more… something like this could be good as a theme component. If someone put together a “buttons” component with the relevant CSS, you could then import it and change a few variables to change all button colors.

[Biscuit]

Yeah, that would be really useful and save a bunch of people from trying to identify the required CSS.

I would compile this, but my CSS skills are very basic.

[BlackKnob]

It’s a brilliant idea. CSS hooks are not always easy to trace.

[Johani (Joe)]

If you’re looking for the selectors, this should cover most buttons:

// Mind specificity, more specific selectors will override
// more general ones

// Base
// --------------------------------------------------

.btn {
  // general styles apply to all buttons

  &:active,
  &.btn-active {
    // active buttons
  }

  &:hover,
  &.btn-hover {
    // hovered buttons
  }

  &[disabled],
  &.disabled {
    // disabled buttons
    &:hover {
      // hovered disabled buttons
    }
  }

  .fa {
    // styles for .fa elements
    // inside buttons
  }

  .d-icon {
    // styles for .d-icon elements
    // inside buttons (icons)
  }

  &.no-text {
    // styles for buttons with
    // no text

    .fa {
      // styles for .fa elements
      // inside buttons with no
      // text
    }
  }

  &.hidden {
    // hidden buttons
  }

  &[href] {
    // links that look like
    // buttons experiment with
    // background: red;
    // to see them
  }

  &.btn-primary .d-icon {
    // styles for .d-icon elements
    // inside  primary buttons (icons)
  }
}

// Primary button
// --------------------------------------------------

.btn-primary {
  // primary buttons, like the Reply button

  &[href] {
    // links that look like
    // primary buttons experiment with
    // background: red;
    // to see them
  }
  &:hover,
  &.btn-hover {
    // hovered primary buttons
  }
  &:active,
  &.btn-active {
    // active primary buttons
  }
  &[disabled],
  &.disabled {
    // disabled primary buttons
  }
}

// Danger button
// --------------------------------------------------

.btn-danger {
  // danger buttons like
  // delete and cancel

  &[href] {
    // links that look like
    // danger buttons
  }
  &:hover,
  &.btn-hover {
    // hovered danger buttons
  }
  &:active,
  &.btn-active {
    // active danger buttons
  }
  &[disabled],
  &.disabled {
    // disabled danger buttons
  }
}

// Social buttons
// --------------------------------------------------

.btn-social {
  // social buttons like facebook
  // twitter google

  &:hover {
    // hoverd social buttons
  }
  &[href] {
    // links that look
    // like social buttons
  }
  &:before {
    // :before psudo-element
    // for all social buttons
  }
  &.google,
  &.google_oauth2 {
    // google buttons

    &:before {
      // google buttons :before
    }
  }
  &.instagram {
    // instagram buttons

    &:before {
      // instagram buttons :before
    }
  }
  &.facebook {
    // facebook buttons

    &:before {
      // facebook buttons :before
    }
  }
  &.twitter {
    // twitter buttons

    &:before {
      // twitter buttons :before
    }
  }
  &.yahoo {
    // yahoo buttons

    &:before {
      // yahoo buttons :before
    }
  }
  &.github {
    // github buttons

    &:before {
      // github buttons :before
    }
  }
}

// Button Sizes
// --------------------------------------------------

.btn-small {
  // small buttons
}

.btn-large {
  // large buttons
}

.btn-flat {
  // flat buttons

  .d-icon {
    // icons inside flat buttons
  }
}

This can be found here:
discourse/app/assets/stylesheets/common/components/buttons.scss at edf326a9a5fddb884af5782b4a896da33793bcfa · discourse/discourse · GitHub

[Biscuit]

Thanks Joe! (and Kris). Really helpful.

[Flower_Child (Dakota)]

@awesomerobot

That being said, it could be interesting to have an “advanced mode” or a plugin(?) that allows for more finesse when editing colors…

This would be really nice to see actually.

[awesomerobot (Kris)]

I put together a theme component with the goal of making changing button colors a bit easier in the short-term.

Discourse Button Styles

This theme component includes basic settings for changing button colors without writing CSS. Github repo: https://github.com/awesomerobot/discourse-button-styles Installation: Installing a theme or theme component Preview: Example of what you can style with the settings in this theme [25%20AM] What the settings look like: [37%20AM] There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius): basic bu…

In the future I’d like to use this to see where button styling can be streamlined in Discourse’s core CSS.