Colors changed in beta7?

Support
1

Some of my theme colors have changed after upgrading like the buttons and the quote highlight, etc. Is this a permanent change that I need to tweak via css or a mistake? Seems like a step backwards.

Before:

image
image.jpg3163×1480 900 KB

After:

image
image.jpg3200×1542 945 KB

Edit: I see it was a change made here: Better contrast ratio match between dark and light themes - discourse - Discourse Reviews so, is this expected behavior @awesomerobot?

2

Yes, as you discovered this change was intentional. The contrast between some colors was higher in dark themes than in light themes, so the contrast was reduced a bit for dark themes with the goal of matching more closely.

I tested the change with our default color schemes and it seemed ok across the board, but clearly your colors must be hitting some exception.

I’m taking a closer look at your color scheme to get a better sense of what’s going on.

7 Likes
3

I spent a little time looking at your colors, and unfortunately I think this is a case where the higher contrast in dark themes was working well for your specific color scheme, despite being slightly off in our defaults.

In Discourse we take the primary color in the settings and shift it to 5 different contrast variables (in this case I adjusted primary-low to have ~10% less contrast in dark themes, which more accurately matches the contrast ratio in light themes overall).

In your case the primary-low we generate now happens to be really close to your secondary color. If you shift primary or secondary a little darker things get better, but since the goal with the change was to reduce contrast slightly that color is always going to look a bit darker than it was.

If you change your primary color to the darker c2c2cb you end up with a better contrast level, but in the opposite direction.

02%20PM
Screen Shot 2019-01-03 at 10.17.02 PM.png844×608 20.8 KB

If you use a darker color for secondary (for example, your header background color 26262B) you end up a bit closer to where you were originally (albeit with a darker background).

23%20PM
Screen Shot 2019-01-03 at 10.23.23 PM.png722×398 11 KB

7 Likes
5

Thanks for looking into the Kris. This is really frustrating though, I spent a lot of time getting my colors just the way I wanted them. Is there any hope of getting an option to change the contrast percentage? Otherwise I’m going to have to manually change everything with css to get it back to the way it was. :disappointed_relieved:

6

I definitely hear you, there’s a lot to override. I’ve actually done most of it before for a theme, so with a little effort I was able to pull together everywhere that $primary-low is used.

If you create a new theme component and add this under common it should do all the work for you. To adjust the color just change the value assigned to $primary-low on the first line.

$primary-low: #48576a;

.table-heading {
  border-color: $primary-low;
}

.diff .hljs-meta {
  color: $primary-low;
}

.autocomplete {
  border-color: $primary-low;
  ul {
    border-color: $primary-low;
  }
}

div.ac-wrap div.item a.remove,
.remove-link {
  border-color: $primary-low;
}

.directory {
  table {
    td,
    th {
      border-color: $primary-low;
    }
    th.sortable {
      &:hover {
        background-color: $primary-low;
      }
    }
  }
}

input,
select,
textarea {
  &[disabled],
  &[readonly] {
    background-color: $primary-low;
    border-color: $primary-low;
  }
}

.input {
  &-prepend,
  &-append {
    .add-on {
      background-color: $primary-low;
    }
  }
}

select {
  border: 1px solid $primary-low;
}

ul {
  li {
    border-color: $primary-low;

    &:first-of-type {
      border-color: $primary-low;
    }

    a {
      &:hover {
        background-color: $primary-low;
      }
    }
  }
}

.emoji-picker {
  border-color: $primary-low;
}

.emoji-picker .categories-column {
  border-color: 1px solid $primary-low;
}

.emoji-picker .footer {
  border-color: $primary-low;
}

.emoji-picker .filter {
  border-color: $primary-low;
}

table.group-members {
  th.sortable {
    &:hover {
      background-color: $primary-low;
    }
  }
}

.d-header-icons {
  text-align: center;
  margin: 0 0 0 5px;
  list-style: none;

  > li {
    float: left;
  }
  .icon {
    &:hover,
    &:focus {
      background-color: $primary-low;
    }
    &:active {
      background-color: $primary-low;
    }
  }
  .drop-down-mode & {
    .active .icon {
      border-color: $primary-low;
    }
  }
}

.modal.history-modal {
  #revision-details {
    border-color: $primary-low;
  }
}

.onebox img.d-lazyload-hidden {
  border-color: $primary-low;
}

.menu-panel {
  border-color: $primary-low;
}

.modal-header {
  border-color: $primary-low;
}

.modal-footer {
  border-color: $primary-low;
}

.modal {
  .nav {
    border-color: $primary-low;
  }
}
.reply-where-modal {
  .modal-footer {
    .btn {
      &.btn-reply-here {
        background: $primary-low;
      }
    }
  }
}

.incoming-email-modal {
  .btn {
    &:focus {
      outline: 2px solid $primary-low;
    }
  }

  .incoming-email-content {
    textarea,
    .incoming-email-html-part {
      border-top: 1px solid $primary-low;
    }
  }
}

aside.onebox {
  border-color: $primary-low;
}

.search-menu .results {
  .main-results + .secondary-results {
    border-left: 1px solid $primary-low;
    margin-left: 1em;
    padding-left: 1em;
    max-width: 33%;
  }
  .secondary-results {
    .classification-results {
      border-bottom: 1px solid $primary-low;
    }
  }
}

.search-container .search-advanced {
  .search-info {
    border-bottom: 3px solid $primary-low;
  }
  .search-advanced-title {
    background: $primary-low;
    &.btn {
      background: $primary-low;
    }
  }
}

.popup-menu {
  border: 1px solid $primary-low;
}

.placeholder-avatar {
  background-color: $primary-low;
}

.placeholder-text {
  background-color: $primary-low;
}

.topic-map {
  border: 1px solid $primary-low;
  section {
    border-top: 1px solid $primary-low;
  }
  .user {
    border: 1px solid $primary-low;
  }
}

kbd {
  border: 1px solid $primary-low;
}

.small-action {
  border-top: 1px solid $primary-low;
}

a.mention,
a.mention-group {
  background: $primary-low;
}

.broken-image,
.large-image {
  border: 1px solid $primary-low;
}

.topic-post {
  article.boxed {
    .select-posts {
      button {
        background-color: $primary-low;
      }
    }
  }
}

.post-links-container {
  .post-links {
    border-top: 1px solid $primary-low;
  }
}

.user-badge {
  border: 1px solid $primary-low;
}

.badge-card {
  border: 1px solid $primary-low;
}

.show-badge-details {
  .badge-set-title {
    border: 1px solid $primary-low;
  }
}

.user-main {
  .about {
    .secondary {
      border-top: 1px solid $primary-low;
      border-bottom: 1px solid $primary-low;
    }
  }
}

.top-sub-section {
  li {
    border-left: $primary-low solid 2px;
  }
}

.badge-notification {
  &.clicks {
    background-color: $primary-low;
  }
}

.badge-group {
  background-color: $primary-low;
  border-color: $primary-low;
}

.btn {
  background: $primary-low;
  &[disabled],
  &.disabled {
    background: $primary-low;
  }
}

.nav-stacked {
  background: $primary-low;
  li {
    border-bottom: 1px solid $primary-low;
  }
}

.user-stream {
  .item,
  .user-stream-item {
    border-bottom: 1px solid $primary-low;
  }
}

.d-editor .d-editor-modal {
  border: 1px solid $primary-low;
}

.d-editor-button-bar {
  border-bottom: 1px solid $primary-low;
}

.d-editor-spacer {
  background-color: $primary-low;
}

.user-preferences .bio-composer,
.group-form-bio,
.edit-category-tab-topic-template {
  .d-editor-textarea-wrapper {
    border: 1px solid $primary-low;
  }
}

.user-preferences .bio-composer,
.group-form-bio {
  border: 1px solid $primary-low;
}

hr {
  border-top: 1px solid $primary-low;
}

tbody {
  border-top: 3px solid $primary-low;
}

tr {
  border-bottom: 1px solid $primary-low;
}

.select-kit {
  &.combo-box {
    min-width: auto;

    .select-kit-filter {
      border-top: 1px solid $primary-low;
      border-bottom: 1px solid $primary-low;
    }
  }
}

.select-kit {
  &.dropdown-select-box {
    &.composer-actions {
      .select-kit-header {
        border: 1px solid $primary-low;
        &:hover,
        &:focus {
          background: $primary-low;
        }
      }
    }
  }
}

.select-kit {
  &.dropdown-select-box {
    .select-kit-body {
      border: 1px solid $primary-low;
    }
  }
}

.select-kit {
  &.combo-box {
    &.mini-tag-chooser {
      .select-kit-collection {
        .collection-header {
          border-bottom: 1px solid $primary-low;

          .selected-tag {
            background: $primary-low;
          }
        }
      }
    }
  }
}

.select-kit {
  &.multi-select {
    .choices {
      .selected-color {
        .selected-name {
          .body {
            background: $primary-low;
          }
        }
      }
    }
  }
}

.select-kit {
  &.dropdown-select-box {
    &.toolbar-popup-menu-options {
      .select-kit-row {
        background: $primary-low;

        &.is-selected {
          background: $primary-low;
        }
      }
    }
  }
}

#topic-entrance {
  border: 1px solid $primary-low;
}

// Desktop

.desktop-view {
  .fullscreen-composer {
    #reply-control {
      &.fullscreen {
        .reply-to {
          border-bottom: 1px solid $primary-low;
        }

        &.show-preview .d-editor-textarea-wrapper {
          border-right: 1px solid $primary-low;
        }
      }
    }
  }

  .modal.history-modal {
    #revision-controls {
      .btn[disabled] {
        background-color: $primary-low;
      }
    }
  }

  .latest-topic-list-item {
    border-bottom: 1px solid $primary-low;
  }

  .login-modal,
  .create-account {
    #login-buttons:not(.hidden) {
      border-left: 1px solid $primary-low;
    }
  }

  .topic-list {
    .sortable {
      &:hover {
        background-color: $primary-low;
      }
    }
  }

  nav.post-controls {
    .show-replies {
      &:hover {
        background: $primary-low;
      }
    }

    button {
      &.d-hover,
      &:focus {
        background: $primary-low;
      }
    }
    .post-admin-menu {
      border: 1px solid $primary-low;
    }
  }

  .embedded-posts {
    border: 1px solid $primary-low;

    .collapse-down,
    .collapse-up {
      border: 1px solid $primary-low;

      &:hover {
        background: $primary-low;
      }
    }
    &.bottom {
      .row {
        .topic-avatar,
        .topic-body {
          border-top: 1px solid $primary-low;
        }
      }
    }
    &.top {
      .row {
        .topic-avatar,
        .topic-body {
          border-top: 1px solid $primary-low;
        }
      }
    }
  }

  .topic-map {
    .buttons {
      .btn {
        border-left: 1px solid $primary-low;
        &:hover {
          background: $primary-low;
        }
      }
    }
  }

  .quote {
    aside {
      .quote,
      .title,
      blockquote,
      .onebox,
      .onebox-result {
        border-left: 5px solid $primary-low;
      }
    }
  }

  .topic-body {
    border-top: 1px solid $primary-low;
  }

  .topic-avatar {
    border-top: 1px solid $primary-low;
  }
  .time-gap + .topic-post .embedded-posts.top {
    border-bottom: 1px solid $primary-low;
  }

  .dropdown-menu {
    border: 1px solid $primary-low;
  }

  .topic-status-info {
    border-top: 1px solid $primary-low;
  }

  #topic-progress-expanded {
    border: 1px solid $primary-low;
  }

  #user-card,
  #group-card {
    .badge-section {
      .user-badge {
        border: 1px solid $primary-low;
      }
    }
  }

  .user-invite-list {
    td {
      border-bottom: 1px solid $primary-low;
    }
  }

  .user-main {
    .about {
      &.collapsed-info {
        .details {
          border-bottom: 1px solid $primary-low;
        }
      }
    }
  }

  article.post {
    .quote .title {
      border-left: 5px solid darken($primary-low, 10%);
      background-color: $primary-low;
    }
    blockquote {
      background-color: $primary-low;
      border-left: 5px solid darken($primary-low, 10%);
    }
  }

  div.poll {
    .poll-info {
      border-left: 1px solid $primary-low;

      .poll-buttons {
        border-top: 1px solid $primary-low;
      }
    }
  }
}

// Mobile

.mobile-view {
  .directory .user {
    border-top: 1px solid $primary-low;
  }

  .mobile-nav {
    background: $primary-low;
  }

  .group-members {
    .group-member {
      border-top: 1px solid $primary-low;
    }
  }

  .login-modal,
  .create-account {
    #login-buttons:not(.hidden) {
      + #login-form {
        border-top: 1px solid $primary-low;
      }
    }
  }

  .create-account .modal-body {
    #login-buttons {
      border-bottom: 1px solid $primary-low;
    }
  }

  .list-controls {
    .nav-pills {
      .drop {
        border: 1px solid $primary-low;
      }
    }
  }

  tr.category-topic-link {
    border-bottom: 1px solid $primary-low;
  }

  .category-list-item {
    > footer {
      border-top: 1px solid $primary-low;
    }
  }

  .topic-post article {
    border-top: 1px solid $primary-low;
  }

  .post-admin-menu {
    border: 1px solid $primary-low;
  }

  .topic-map {
    .buttons {
      .btn {
        border-left: 1px solid $primary-low;
      }
    }
  }

  .topic-status-info {
    border-top: 1px solid $primary-low;
  }

  #topic-progress-expanded {
    border: 1px solid $primary-low;
  }

  .user-main {
    table.group-members {
      th {
        border-bottom: 1px solid $primary-low;
      }
      td {
        border-bottom: 1px solid $primary-low;
      }
    }

    .user-content {
      table {
        th {
          border-bottom: 1px solid $primary-low;
        }

        td {
          border-bottom: 1px solid $primary-low;
        }
      }
    }
  }

  .elided {
    summary {
      background: $primary-low;
    }
  }

  div.poll {
    border: 1px solid $primary-low;
    .bar-back {
      background: $primary-low;
    }
    .poll-info {
      border-top: 1px solid $primary-low;
    }
  }
}
9 Likes
7

Fantastic! Thank you Kris. The primary button colors are being overridden, but I used the discourse-buttons component to overcome this. Also for anyone else doing this I would add tags and quotes

.discourse-tag.box {
    background-color: $primary-low;
}

blockquote {
    border-left: 5px solid $primary-low;
}
2 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.