# Colori cambiati nella beta7?

**URL:** https://meta.discourse.org/t/colors-changed-in-beta7/105647
**Category:** Support
**Created:** [3 Gennaio 2019, 9:20pm UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647 "2019-01-03T21:20:13Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [3 Gennaio 2019, 9:20pm UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/1 "2019-01-03T21:20:13Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/e/b/eba1b4a6deb8e6062076278a6948d4ac7daab3a4.jpeg)

After:

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/d/fd9cc4e42064c244c547b25baa06d938323bddb5.jpeg)

Edit: I see it was a change made here: [https://review.discourse.org/t/better-contrast-ratio-match-between-dark-and-light-themes/933](https://review.discourse.org/t/better-contrast-ratio-match-between-dark-and-light-themes/933) so, is this expected behavior @awesomerobot?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3 Gennaio 2019, 10:22pm UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/2 "2019-01-03T22:22:34Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [4 Gennaio 2019, 3:29am UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/3 "2019-01-04T03:29:02Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/6/f/6f9b13058ed5f41632bd9cc3fc11ee27e1889265.png)

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](https://global.discourse-cdn.com/meta/original/3X/1/3/130d05733af9cc5a29f06e2ee45d9825b0dd6099.png)

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [4 Gennaio 2019, 3:40pm UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/5 "2019-01-04T15:40:19Z")

</div>

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. 😥

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [4 Gennaio 2019, 10:50pm UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/6 "2019-01-04T22:50:36Z")

</div>

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.

```SCSS
$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;
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [5 Gennaio 2019, 4:45am UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/7 "2019-01-05T04:45:46Z")

</div>

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

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

blockquote {
    border-left: 5px solid $primary-low;
}
```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [4 Febbraio 2019, 4:46am UTC](https://meta.discourse.org/t/colors-changed-in-beta7/105647/8 "2019-02-04T04:46:12Z")

</div>

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