From ffa33c572cc0c2b86c05c8228eff2660bff9a9c4 Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Mon, 19 May 2014 01:17:59 -0400
Subject: [PATCH] making the color customizer a little nicer with dark themes

---
 .../stylesheets/common/admin/admin_base.scss  | 42 ++++++-------
 .../stylesheets/common/base/colorpicker.scss  |  2 +-
 .../stylesheets/common/base/compose.scss      | 12 ++--
 .../stylesheets/common/base/discourse.scss    |  6 +-
 .../stylesheets/common/base/history.scss      |  2 +-
 app/assets/stylesheets/common/base/modal.scss | 10 ++--
 .../stylesheets/common/base/onebox.scss       |  8 +--
 .../stylesheets/common/base/pagedown.scss     | 12 ++--
 .../stylesheets/common/base/share_link.scss   |  2 +-
 .../common/base/topic-admin-menu.scss         |  2 +-
 .../common/components/buttons.css.scss        |  4 +-
 .../components/keyboard_shortcuts.css.scss    |  1 -
 .../common/components/navs.css.scss           |  4 +-
 .../stylesheets/common/foundation/base.scss   |  2 +-
 .../common/foundation/variables.scss          | 10 ++++
 app/assets/stylesheets/desktop/compose.scss   | 16 ++---
 app/assets/stylesheets/desktop/discourse.scss | 22 +++----
 app/assets/stylesheets/desktop/header.scss    | 16 ++---
 app/assets/stylesheets/desktop/modal.scss     |  6 +-
 .../stylesheets/desktop/poster_expansion.scss |  2 +-
 .../stylesheets/desktop/topic-list.scss       | 16 ++---
 .../stylesheets/desktop/topic-post.scss       | 60 +++++++++----------
 app/assets/stylesheets/desktop/topic.scss     | 14 ++---
 app/assets/stylesheets/desktop/user.scss      |  8 +--
 app/assets/stylesheets/embed.css.scss         |  6 +-
 app/assets/stylesheets/mobile/compose.scss    | 10 ++--
 app/assets/stylesheets/mobile/header.scss     |  4 +-
 app/assets/stylesheets/mobile/topic-list.scss | 10 ++--
 app/assets/stylesheets/mobile/topic-post.scss |  4 +-
 app/assets/stylesheets/mobile/topic.scss      |  2 +-
 app/assets/stylesheets/mobile/user.scss       |  8 +--
 31 files changed, 166 insertions(+), 157 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index a720a0f45..fb8982339 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -9,8 +9,8 @@
   width: 100%;
   tr {text-align: left;}
   td, th {padding: 8px;}
-  th {border-top: 1px solid scale-color($primary, $lightness: 90%);}
-  td {border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 90%);}
+  th {border-top: 1px solid scale-color-diff();}
+  td {border-bottom: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();}
   tr:hover { background-color: darken($secondary, 2.5%); }
   tr.selected { background-color: lighten($primary, 50%); }
   .filters input { margin-bottom: 0; }
@@ -20,7 +20,7 @@
   font-size: 12px;
   float: right;
   margin-right: 10px;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   padding: 2px 5px;
   border-radius: 5px;
   color: $primary;
@@ -92,7 +92,7 @@
   .nav.nav-pills {
     li.active {
       a {
-        border-color: scale-color($primary, $lightness: 90%);
+        border-color: scale-color-diff();
         background-color: lighten($primary, 40%);
         &:hover {
           background-color: lighten($primary, 40%);
@@ -165,7 +165,7 @@
   @include small-width  { width: 700px; }
   min-height: 800px;
   margin-left: 0;
-  border-left: solid 1px scale-color($primary, $lightness: 90%);
+  border-left: solid 1px scale-color-diff();
   padding: 30px 0 30px 30px;
 }
 
@@ -199,7 +199,7 @@
       width: 408px;
       padding: 1px;
       background-color: $secondary;
-      border: 1px solid scale-color($primary, $lightness: 90%);
+      border: 1px solid scale-color-diff();
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
       -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -209,7 +209,7 @@
         width: 90px;
         margin: 2px 1px;
         background-color: $secondary;
-        border: 1px solid scale-color($primary, $lightness: 90%);
+        border: 1px solid scale-color-diff();
         border-radius: 3px;
         box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -257,7 +257,7 @@
 section.details {
   h1 {
     font-size: 15px;
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
     color: $secondary;
     padding: 0 10px;
     margin: 0 0 5px 0;
@@ -282,7 +282,7 @@ section.details {
   &.highlight-danger {
     background-color: scale-color($danger, $lightness: 50%);
   }
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
   &:before, &:after {
     display: table;
     content: "";
@@ -591,7 +591,7 @@ table.api-keys {
     th {
       font-weight: normal;
       text-align: center;
-      background-color: scale-color($primary, $lightness: 90%);
+      background-color: scale-color-diff();
     }
     th.title {
       text-align: left;
@@ -636,7 +636,7 @@ table.api-keys {
 
   &.detected-problems {
     @include border-radius-all(5px);
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
     margin-bottom: 20px;
     margin-top: 10px;
     box-shadow: inset 0 0 10px rgba($primary, .1);
@@ -703,7 +703,7 @@ table.api-keys {
 
 
 .commits-widget {
-  border: solid 1px scale-color($primary, $lightness: 90%);
+  border: solid 1px scale-color-diff();
   width: 500px;
   height: 180px;
   margin-bottom: 36px;
@@ -757,7 +757,7 @@ table.api-keys {
       @extend .clearfix;
       line-height: 1.0em;
       padding: 6px 8px;
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
       .left {
         float: left;
       }
@@ -767,7 +767,7 @@ table.api-keys {
 
       img {
         margin-top: 2px;
-        border: solid 1px scale-color($primary, $lightness: 90%);
+        border: solid 1px scale-color-diff();
         padding: 2px;
         background-color: $secondary;
       }
@@ -802,7 +802,7 @@ table.api-keys {
     -webkit-border-radius: 3px;
   }
   ::-webkit-scrollbar-track {
-    border-left: solid 1px scale-color($primary, $lightness: 90%);
+    border-left: solid 1px scale-color-diff();
   }
 }
 
@@ -820,10 +820,10 @@ table.api-keys {
     margin: 0;
 
     li:first-of-type {
-      border-top: 1px solid scale-color($primary, $lightness: 90%);
+      border-top: 1px solid scale-color-diff();
     }
     li {
-      border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+      border-bottom: 1px solid scale-color-diff();
     }
 
     li a {
@@ -832,7 +832,7 @@ table.api-keys {
       color: $primary;
 
       &:hover {
-        background-color: scale-color($primary, $lightness: 90%);
+        background-color: scale-color-diff();
         color: $primary;
       }
 
@@ -996,7 +996,7 @@ table.api-keys {
     color: $primary;
     &:hover {
       color: $primary;
-      background-color: scale-color($primary, $lightness: 90%);
+      background-color: scale-color-diff();
 
 
     }
@@ -1030,7 +1030,7 @@ table.api-keys {
 
   .heading-container {
     width: 100%;
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
   }
   .col.heading {
     font-weight: bold;
@@ -1046,7 +1046,7 @@ table.api-keys {
 
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px scale-color($primary, $lightness: 90%);
+    border-top: solid 1px scale-color-diff();
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index 7dff0c4b1..4232d6ed7 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -18,7 +18,7 @@
     max-width: 300px;
 
     .colorpicker {
-      border: 1px solid scale-color($primary, $lightness: 90%);
+      border: 1px solid scale-color-diff();
       margin-right: 2px;
       width: 16px;
       height: 16px;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index e1969b558..64955489b 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -3,13 +3,13 @@
   position: absolute;
   width: 240px;
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
     li {
-      border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+      border-bottom: 1px solid scale-color-diff();
       a[href] {
         padding: 5px;
         display: block;
@@ -20,10 +20,10 @@
           font-size: 11px;
         }
         &.selected {
-          background-color: scale-color($primary, $lightness: 90%);
+          background-color: scale-color-diff();
         }
         @include hover {
-          background-color: scale-color($primary, $lightness: 90%);
+          background-color: scale-color-diff();
           text-decoration: none;
         }
       }
@@ -43,7 +43,7 @@ div.ac-wrap.disabled {
 
 div.ac-wrap {
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   padding: 5px 4px 1px 4px;
   div.item {
     float: left;
@@ -62,7 +62,7 @@ div.ac-wrap {
       border-radius: 12px;
       width: 10px;
       display: inline-block;
-      border: 1px solid scale-color($primary, $lightness: 90%);
+      border: 1px solid scale-color-diff();
       &:hover {
         background-color: scale-color($danger, $lightness: 75%);
         border: 1px solid scale-color($danger, $lightness: 30%);
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 028aa7f50..466afb225 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -97,10 +97,10 @@ body {
   width: 540px;
   background-color: $secondary;
   padding: 0 10px 13px 10px;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   .preview {
     margin-top: 8px;
-    border: 1px dashed scale-color($primary, $lightness: 90%);
+    border: 1px dashed scale-color-diff();
     padding: 8px 8px 0 8px;
     p {
       margin: 0 0 10px 0;
@@ -147,7 +147,7 @@ body {
 .avatar-wrapper {
   background-color: $secondary;
   display: inline-block;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   @include border-radius-all(5px);
   img {
     @include border-radius-all(4px);
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index 8ecac683d..13b4da2e7 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/app/assets/stylesheets/common/base/history.scss
@@ -27,7 +27,7 @@
     }
   }
   #revision-details {
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
     padding: 5px;
     margin-top: 10px;
   }
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 83756055b..08c4c786a 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -51,8 +51,8 @@
   max-width: 710px;
   margin: 0 auto;
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
+  border: 1px solid scale-color-diff();
 
   box-shadow: 0 3px 7px rgba($primary, .8);
   background-clip: padding-box;
@@ -73,7 +73,7 @@
 .modal-footer {
   margin: 0 15px;
   padding: 14px 0 15px;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
 }
 .modal-footer:before,
 .modal-footer:after {
@@ -91,7 +91,7 @@
     li > a {
       font-size: 14px;
     }
-    border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+    border-bottom: 1px solid scale-color-diff();
 
   }
 
@@ -144,7 +144,7 @@
         font-weight: normal;
       }
       &.btn-reply-here {
-        background: scale-color($primary, $lightness: 90%);
+        background: scale-color-diff();
         text-shadow: none;
         color: $primary;
       }
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 507a42f04..1bc3c818d 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -13,8 +13,8 @@ a.loading-onebox {
 .onebox-result {
   margin-top: 15px;
   padding: 12px 25px 12px 12px;
-  border-left: 5px solid scale-color($primary, $lightness: 75%);
-  background: scale-color($primary, $lightness: 95%);
+  border-left: 5px solid darken(scale-color-diff(), 10%);
+  background: scale-color-diff();
   font-size: 14px;
   > .source {
     margin-bottom: 12px;
@@ -91,8 +91,8 @@ a.loading-onebox {
 aside.onebox {
   margin-top: 15px;
   padding: 12px 25px 12px 12px;
-  border-left: 5px solid scale-color($primary, $lightness: 75%);
-  background: scale-color($primary, $lightness: 95%);
+  border-left: 5px solid darken(scale-color-diff(), 10%);
+  background: scale-color-diff();
   font-size: 14px;
 
   header {
diff --git a/app/assets/stylesheets/common/base/pagedown.scss b/app/assets/stylesheets/common/base/pagedown.scss
index e6ee1ddb7..3d7ec7c0f 100644
--- a/app/assets/stylesheets/common/base/pagedown.scss
+++ b/app/assets/stylesheets/common/base/pagedown.scss
@@ -26,7 +26,7 @@
   height: 20px;
   margin-right: 8px;
   margin-left: 5px;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   display: inline-block;
   float: left;
 }
@@ -63,7 +63,7 @@
 }
 
 .wmd-button:hover {
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
 }
 
 
@@ -125,8 +125,8 @@
 }
 
 .wmd-prompt-dialog {
-  border: 1px solid scale-color($primary, $lightness: 90%);
-  background-color: scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
+  background-color: scale-color-diff();
 }
 
 .wmd-prompt-dialog > div {
@@ -135,12 +135,12 @@
 }
 
 .wmd-prompt-dialog > form > input[type="text"] {
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   color: $primary;
 }
 
 .wmd-prompt-dialog > form > input[type="button"] {
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   font-family: trebuchet MS, helvetica, sans-serif;
   font-size: 0.8em;
   font-weight: bold;
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 542da79c7..647b88f5c 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -5,7 +5,7 @@
   left: 20px;
   z-index: 990;
   box-shadow: 0 1px 5px rgba($primary, .4);
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   padding: 6px 10px 10px 10px;
   width: 300px;
   display: none;
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 6a87d86a0..987736859 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -11,7 +11,7 @@
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   position: fixed;
   top: 70px;
   right: 10px;
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index 3108358f1..5e2a4e3da 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -39,7 +39,7 @@
   border: none;
   color: $primary;
   font-weight: normal;
-  background: scale-color($primary, $lightness: 90%);
+  background: scale-color-diff();
 
   &[href] {
     color: $primary;
@@ -51,7 +51,7 @@
   &:active {
   }
   &[disabled] {
-    background: scale-color($primary, $lightness: 90%);
+    background: scale-color-diff();
     &:hover { color: scale-color($primary, $lightness: 70%); }
     cursor: not-allowed;
   }
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
index 2dc6ef7fe..aa93d5fe1 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
@@ -1,5 +1,4 @@
 .topic-list-item td:first-child, .topic-post {
-  background-color: inherit;
   border-left: 1px solid transparent;
 }
 
diff --git a/app/assets/stylesheets/common/components/navs.css.scss b/app/assets/stylesheets/common/components/navs.css.scss
index ef007ec11..bff57a335 100644
--- a/app/assets/stylesheets/common/components/navs.css.scss
+++ b/app/assets/stylesheets/common/components/navs.css.scss
@@ -50,8 +50,8 @@
   border: 1px solid scale-color($primary, $lightness: 60%);
   padding: 0;
   overflow: hidden;
-  background-color: scale-color($primary, $lightness: 90%);
-  @include box-shadow(0 1px 0 scale-color($primary, $lightness: 90%));
+  background-color: scale-color-diff();
+  @include box-shadow(0 1px 0 scale-color-diff());
   > li {
     border-bottom: 1px solid scale-color($primary, $lightness: 60%);
     &:last-of-type {
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 6d96293e1..6b9f570fb 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -39,7 +39,7 @@ hr {
   height: 1px;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 518e38615..af6a41cf8 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -29,3 +29,13 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
 /* These files don't actually exist. They're injected by DiscourseSassImporter. */
 @import "theme_variables";
 @import "plugins_variables";
+
+
+@function scale-color-diff() {
+    @if lightness($primary) < lightness($secondary) {
+      @return scale-color($primary, $lightness: 95%)
+    }
+    @else {
+      @return scale-color($primary, $lightness: -60%)
+    }
+}
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index fc2bc12c0..d3c5127f0 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -101,7 +101,7 @@
   width: 100%;
   z-index: 1039;
   height: 0;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   bottom: 0;
   font-size: 14px;
   position: fixed;
@@ -148,7 +148,7 @@
   &.draft {
     height: 40px !important;
     cursor: pointer;
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color-diff();
     .draft-text {
       display: block;
     }
@@ -161,7 +161,7 @@
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color-diff();
     .saving-text {
       display: block;
     }
@@ -280,11 +280,11 @@
       margin-right: 10px;
       float: left;
       &:disabled {
-        background-color: scale-color($primary, $lightness: 90%);
+        background-color: scale-color-diff();
       }
     }
     #wmd-input:disabled {
-      background-color: scale-color($primary, $lightness: 90%);
+      background-color: scale-color-diff();
     }
     #wmd-input, #wmd-preview {
       color: $primary;
@@ -299,7 +299,7 @@
       }
     }
     #wmd-preview {
-      border: 1px dashed scale-color($primary, $lightness: 90%);
+      border: 1px dashed scale-color-diff();
       overflow: auto;
       visibility: visible;
 
@@ -328,7 +328,7 @@
   .show-admin-options {
     vertical-align: top;
     margin-top: 8px;
-    background: scale-color($primary, $lightness: 90%);
+    background: scale-color-diff();
   &:hover {
     color: $secondary;
     background: $primary;
@@ -453,7 +453,7 @@
   #wmd-button-bar {
     top: 0;
     position: absolute;
-    border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+    border-bottom: 1px solid scale-color-diff();
     background-color: $secondary;
     z-index: 100;
   }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index ad07f2857..7dd4f244b 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -113,22 +113,22 @@ body {
 
   .grippie {
     width: 100%;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     border-width: 1px 0;
     cursor: row-resize;
     height: 11px;
     overflow: hidden;
-    background-color: scale-color($primary, $lightness: 95%);
+    background-color: scale-color-diff();
     display:block;
-    background: image-url("grippie.png") scale-color($primary, $lightness: 95%) no-repeat center 3px;
+    background: image-url("grippie.png") scale-color-diff() no-repeat center 3px;
   }
 }
 
 blockquote {
   /* 13px left is intentional here to properly align with post quotes */
   padding: 10px 4px 4px 13px;
-  background-color: scale-color($primary, $lightness: 95%);
-  border-left: 5px solid scale-color($primary, $lightness: 75%);
+  background-color: scale-color-diff();
+  border-left: 5px solid darken(scale-color-diff(), 10%);
 }
 
 .topic-statuses {
@@ -223,7 +223,7 @@ body {
     width: 210px;
     height: auto;
     background-color:$secondary;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba($primary, .3);
     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -232,7 +232,7 @@ body {
   input {
     &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
       background-color: $secondary;
-      border: 1px solid scale-color($primary, $lightness: 90%);
+      border: 1px solid scale-color-diff();
       border-radius: 3px;
     box-shadow: inset 0 1px 1px rgba($primary, .3);
       -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -269,7 +269,7 @@ body {
 
   select {
     width: 220px;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     &[multiple], &[size] {
       height: auto;
     }
@@ -319,8 +319,8 @@ body {
   }
   input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
     cursor: not-allowed;
-    background-color: scale-color($primary, $lightness: 90%);
-    border-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
+    border-color: scale-color-diff();
   }
   input {
     &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@@ -416,7 +416,7 @@ body {
     text-align: center;
     vertical-align: middle;
     background-color: $secondary;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
   }
   .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
     margin-left: -1px;
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 37131a81a..de8a8f38f 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -75,14 +75,14 @@
 
       &:hover {
         color: $primary;
-        background-color:  scale-color($primary, $lightness: 90%);
+        background-color:  scale-color-diff();
         border-top: 1px solid transparent;
         border-left: 1px solid transparent;
         border-right: 1px solid transparent;
       }
       &:active {
         color: $primary;
-        background-color: scale-color($primary, $lightness: 90%);
+        background-color: scale-color-diff();
       }
     }
     .active .icon {
@@ -90,9 +90,9 @@
       color: #7b7b7b;
       background-color: $secondary;
       cursor: default;
-      border-top: 1px solid scale-color($primary, $lightness: 90%);
-      border-left: 1px solid scale-color($primary, $lightness: 90%);
-      border-right: 1px solid scale-color($primary, $lightness: 90%);
+      border-top: 1px solid scale-color-diff();
+      border-left: 1px solid scale-color-diff();
+      border-right: 1px solid scale-color-diff();
       &:after {
         display: block;
         position: absolute;
@@ -163,7 +163,7 @@
   right: 0;
   z-index: 1100;
   overflow: auto;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   background-color: $secondary;
   @include box-shadow(0 2px 2px rgba($primary, .4));
 
@@ -182,9 +182,9 @@
     }
   }
   .heading {
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color-diff();
 
-    border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+    border-bottom: 1px solid scale-color-diff();
     color: darken($primary, 40%);
     font-weight: bold;
     font-size: 12px;
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 07263a788..fba29522d 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -16,8 +16,8 @@
   height: auto;
   margin: -250px 0 0 -305px;
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
+  border: 1px solid scale-color-diff();
 
   box-shadow: 0 3px 7px rgba($primary, .8);
   background-clip: padding-box;
@@ -57,7 +57,7 @@ animation: modal .25s;
   margin-left: -1px;
 }
 .modal-header {
-  border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+  border-bottom: 1px solid scale-color-diff();
   h3 {
     color: $quaternary;
     font-size: 20px;
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index a32834eb9..a789d04ec 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -5,7 +5,7 @@
   width: 460px;
   left: 20px;
   z-index: 990;
-  box-shadow: 0 2px 6px scale-color($primary, $lightness: 90%);
+  box-shadow: 0 2px 6px scale-color-diff();
   margin-top: -2px;
   background-color: $secondary;
   padding: 12px 12px 5px 12px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 2ceb8179d..885cf185a 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -59,7 +59,7 @@
   border-collapse: separate;
   border-spacing: 0;
   margin: 0 0 10px;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
   .fa-thumb-tack {color: $primary;}
   .fa-thumb-tack.unpinned {color: $primary;}
 
@@ -68,7 +68,7 @@
 
   > tbody > tr {
     &:nth-child(even) {
-      background-color: scale-color($primary, $lightness: 96%);
+      background-color: rgba($primary, .04);
     }
     &.archived a {
       opacity: 0.6;
@@ -115,7 +115,7 @@
     padding: 0;
     background: transparent;
     &:hover {
-      color: scale-color($primary, $lightness: 90%);
+      color: scale-color-diff();
     }
   }
 
@@ -213,7 +213,7 @@
   .sortable {
     cursor: pointer;
     &:hover {
-      background-color: scale-color($primary, $lightness: 90%);
+      background-color: scale-color-diff();
     }
     @include unselectable;
   }
@@ -374,10 +374,10 @@
     width: 165px;
   }
   > footer {
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     border-top: 0;
     padding: 7px 10px;
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
     figure {
       float: left;
       margin: 3px 7px 0 0;
@@ -438,7 +438,7 @@
 .list-controls {
 
   .home {
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
     color: $primary;
   }
 
@@ -516,7 +516,7 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: scroll;
   position: absolute;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   background-color: $secondary;
   max-height: 350px;
   padding: 8px 7px 0 7px;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 665089541..f53d44664 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1,5 +1,5 @@
 .gap {
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   padding: 5px 0;
   color: lighten($primary, 35%);
   cursor: pointer;
@@ -7,7 +7,7 @@
   width: 80%;
 
   &:hover {
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
   }
 
   @include medium-width {
@@ -54,7 +54,7 @@ h1 .topic-statuses .topic-status i {
   right: 330px;
   z-index: 400;
   padding: 13px 6px 5px;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
   font-size: 12px;
   color: scale-color($primary, $lightness: 50%);
   @include medium-width {
@@ -111,13 +111,13 @@ nav.post-controls {
   }
 
   .show-replies {
-    background: scale-color($primary, $lightness: 95%);
+    background: scale-color-diff();
     padding: 8px 15px;
     padding-bottom: 20px;
     margin-left: 0;
     span.badge-posts {color: scale-color($primary, $lightness: 60%);}
     &:hover {
-      background: lighten($primary, 76%);
+      background: scale-color-diff();
       span.badge-posts {color: $primary;}
     }
     i {
@@ -157,7 +157,7 @@ nav.post-controls {
     margin-left: 3px;
     transition: all linear 0.15s;
          &:hover {
-          background: scale-color($primary, $lightness: 90%);
+          background: scale-color-diff();
           color: $primary;
         }
 
@@ -211,7 +211,7 @@ nav.post-controls {
     background-color: $secondary;
     width: 205px;
     padding: 10px;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     position: absolute;
     text-align: left;
     bottom: 0;
@@ -244,7 +244,7 @@ nav.post-controls {
 
 .embedded-posts {
   h1, h2, h3 {margin: 10px 0;}
-  a.mention {background: scale-color($primary, $lightness: 90%);}
+  a.mention {background: scale-color-diff();}
   &.bottom {
     &.hidden {display: block; opacity: 0; }
 
@@ -269,13 +269,13 @@ nav.post-controls {
     .topic-avatar {padding-left: 15px;}
     .post-date {color: scale-color($primary, $lightness: 50%);}
     .fa-arrow-up {margin-left: 5px;}
-    .row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;}
+    .row {border-top: 1px solid scale-color-diff(); padding-top: 7px;}
     .reply:first-of-type .row {border-top: none;}
 
-  background: scale-color($primary, $lightness: 95%);
+  background: scale-color-diff();
   .quote .title, blockquote, .onebox, .onebox-result {
-    background: scale-color($primary, $lightness: 90%);
-    border-left: 5px solid scale-color($primary, $lightness: 75%);
+    background: scale-color-diff();
+    border-left: 5px solid darken(scale-color-diff(), 10%);
   }
 
   &.bottom { margin-top: -11px;}
@@ -295,10 +295,10 @@ nav.post-controls {
 }
 
 .bottom-round nav.post-controls .show-replies {
-background: scale-color($primary, $lightness: 95%);
+background: scale-color-diff();
 margin-bottom: 0;
 padding-bottom: 8px;
-  &:hover {background: scale-color($primary, $lightness: 90%);
+  &:hover {background: scale-color-diff();
   }
 }
 
@@ -322,7 +322,7 @@ a.star {
 
 .topic-map {
   margin: 20px 0 0 0;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
 
   .buttons .btn {
     &:hover {border: 1px solid $primary !important;}
@@ -410,7 +410,7 @@ a.star {
     color: $primary;
   }
   .information {
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color-diff();
   }
 
 .participants { // PMs //
@@ -429,10 +429,10 @@ a.star {
     float: right;
     .btn {
       border: 0;
-      border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+      border-bottom: 1px solid scale-color-diff();
       padding: 0 23px;
       color: $primary;
-      background: scale-color($primary, $lightness: 90%);
+      background: scale-color-diff();
       &:hover {
         background: scale-color($primary, $lightness: 75%);
         color: $primary;
@@ -467,7 +467,7 @@ a.star {
   clear: left;
   padding: 20px 0 15px 0;
   #topic-list > tbody > tr:nth-child(even) {
-    background-color: scale-color($primary, $lightness: 97%);
+    background-color: rgba($primary, .04);
   }
   #topic-list > tbody > tr:nth-child(odd) {
     background-color: $secondary;
@@ -605,7 +605,7 @@ iframe {
   a.mention {
     padding: 2px 4px;
     color: $primary;
-    background: scale-color($primary, $lightness: 90%);
+    background: scale-color-diff();
   }
 
 
@@ -677,7 +677,7 @@ blockquote { /* solo quotes */
   margin: 14px 0;
   padding: 12px;
 
-    a.mention {background: scale-color($primary, $lightness: 90%);}
+    a.mention {background: scale-color-diff();}
     p:first-of-type {margin-top: 0;}
     p:last-of-type {margin-bottom: 0;}
 }
@@ -685,14 +685,14 @@ blockquote { /* solo quotes */
 .quote { /* quotes with attribution */
   margin-top: 14px;
   blockquote {margin-top: 0; padding-top: 0;
-  .onebox-result {background-color: $primary;}
+  .onebox-result {background-color: scale-color-diff();}
 
 
   }
 
   .title {
-  border-left: 5px solid scale-color($primary, $lightness: 75%);
-  background-color: scale-color($primary, $lightness: 95%);
+  border-left: 5px solid darken(scale-color-diff(), 10%);
+  background-color: scale-color-diff();
   padding: 12px;
   .avatar { margin-right: 7px; }
   img {margin-top: -4px;}
@@ -756,7 +756,7 @@ blockquote { /* solo quotes */
 .topic-body {
   float: left;
   position: relative;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
   padding: 12px 0 15px 0;
   &.highlighted {
     background-color: scale-color($tertiary, $lightness: 85%);
@@ -766,7 +766,7 @@ blockquote { /* solo quotes */
   }
 }
 .topic-avatar {
- border-top: 1px solid scale-color($primary, $lightness: 90%);
+ border-top: 1px solid scale-color-diff();
  padding-top: 16px;
 
   .wiki {
@@ -828,7 +828,7 @@ blockquote { /* solo quotes */
   margin: 1px 0 0;
   list-style: none;
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   box-shadow: 0 1px 5px rgba($primary, .4);
   background-clip: padding-box;
   span {font-size: 12px;}
@@ -982,8 +982,8 @@ blockquote { /* solo quotes */
         background-color: scale-color($primary, $lightness: 70%);
         border-top: 1px solid $tertiary;
         border-left: 1px solid $tertiary;
-        border-bottom: 1px solid scale-color($primary, $lightness: 90%);
-        border-right: 1px solid scale-color($primary, $lightness: 90%);
+        border-bottom: 1px solid scale-color-diff();
+        border-right: 1px solid scale-color-diff();
         color: $primary;
       }
     }
@@ -1006,7 +1006,7 @@ a.attachment:before {
     position: absolute;
     top: 0;
     left: 10px;
-    color: scale-color($primary, $lightness: 90%);
+    color: scale-color-diff();
     font: 90px/1 FontAwesome;
     content: "\f05c";
     z-index: -5;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index d234f7e0f..49a7f8ee7 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -58,7 +58,7 @@
 .private_message #topic-title .private-message-glyph { display: inline; }
 
 #topic-closing-info {
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
   padding-top: 10px;
   height: 20px;
 }
@@ -79,7 +79,7 @@ a.reply-new {
   i {
     margin-right: 5px;
     background: $secondary;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     padding: 1.5px 3px;
     border-radius: 20px;
     transition: linear 0.15s;
@@ -102,7 +102,7 @@ a:hover.reply-new {
     display: none;
   }
   border: none;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   color: scale-color($primary, $lightness: 50%);
   width: 130px;
   height: 34px;
@@ -151,7 +151,7 @@ a:hover.reply-new {
     top: 0;
     bottom: 0;
     width: 0;
-    border-right: 1px solid  scale-color($primary, $lightness: 90%);
+    border-right: 1px solid  scale-color-diff();
     background-color:  scale-color($success, $lightness: 70%);
     transition: width .75s;
   }
@@ -197,7 +197,7 @@ pre {
   display: block;
   padding: 5px 10px;
   color: $primary;
-  background: scale-color($primary, $lightness: 90%);
+  background: scale-color-diff();
   max-height: 500px;
   }
 }
@@ -213,7 +213,7 @@ sup{top:-0.5em; }
 sub{bottom:-0.25em; }
 figure{margin:0; }
 fieldset{
-  border:1px solid scale-color($primary, $lightness: 90%);
+  border:1px solid scale-color-diff();
   margin:0 2px;
   padding:0.35em 0.625em 0.75em;
 }
@@ -225,7 +225,7 @@ legend{
 kbd
 {
     background-color: $secondary;
-    border:1px solid scale-color($primary, $lightness: 90%);
+    border:1px solid scale-color-diff();
     border-radius: 3px;
     box-shadow: 0 1px 0 rgba($primary, .9);
     color: $primary;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 451dd5add..5d6197238 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -135,7 +135,7 @@
   .user-content {
     padding: 10px 8px;
     background-color: $secondary;
-    border: 1px solid scale-color($primary, $lightness: 90%);
+    border: 1px solid scale-color-diff();
     margin-bottom: 10px;
 
     .btn.right {
@@ -152,13 +152,13 @@
 
       th {
         text-align: left;
-        border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+        border-bottom: 1px solid scale-color-diff();
         padding: 5px;
       }
 
       td {
         padding: 5px;
-        border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+        border-bottom: 1px solid scale-color-diff();
       }
     }
   }
@@ -314,7 +314,7 @@
     .item {
       padding: 20px 8px 15px 8px;
       background-color: $secondary;
-      border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+      border-bottom: 1px solid scale-color-diff();
     }
     .type {
       color: $primary;
diff --git a/app/assets/stylesheets/embed.css.scss b/app/assets/stylesheets/embed.css.scss
index ff37851b3..4e76f7688 100644
--- a/app/assets/stylesheets/embed.css.scss
+++ b/app/assets/stylesheets/embed.css.scss
@@ -13,7 +13,7 @@ article.post {
   }
 
   .quote .title {
-    border-left: 5px solid scale-color($primary, $lightness: 90%);
+    border-left: 5px solid scale-color-diff();
     background-color: lighten($primary, 76%);
     padding: 10px 10px 0 12px;
     .avatar { margin-right: 7px; }
@@ -26,8 +26,8 @@ article.post {
   blockquote {
     padding: 10px 8px 10px 13px;
     margin: 0 0 10px 0;
-    background-color: scale-color($primary, $lightness: 95%);
-    border-left: 5px solid scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
+    border-left: 5px solid darken(scale-color-diff(), 10%);
     p {
       margin: 0 0 10px 0;
     }
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index f3c5b1045..a27413a78 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -41,7 +41,7 @@ display: none;
   width: 100%;
   z-index: 1039;
   height: 0;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   bottom: 0;
   font-size: 14px;
   position: fixed;
@@ -87,7 +87,7 @@ display: none;
   &.draft {
     height: 60px !important;
     cursor: pointer;
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color-diff();
     .draft-text {
       display: block;
           position: absolute;
@@ -102,7 +102,7 @@ display: none;
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid scale-color($primary, $lightness: 90%);
+    border-top: 1px solid scale-color-diff();
     .saving-text {
       display: block;
     }
@@ -216,7 +216,7 @@ display: none;
       }
     }
     #wmd-preview {
-      border: 1px dashed scale-color($primary, $lightness: 90%);
+      border: 1px dashed scale-color-diff();
       overflow: auto;
       visibility: visible;
       p {
@@ -356,7 +356,7 @@ display: none;
   #wmd-button-bar {
     top: 0;
     position: absolute;
-    border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+    border-bottom: 1px solid scale-color-diff();
     background-color: $secondary;
     z-index: 100;
   }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 0dc4c6a5d..012c5d40a 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -85,7 +85,7 @@
       position: relative;
       color: scale-color($primary, $lightness: 75%);
       background-color: $secondary;
-      border: 1px solid scale-color($primary, $lightness: 90%);
+      border: 1px solid scale-color-diff();
       cursor: default;
       &:after {
         display: block;
@@ -156,7 +156,7 @@
   right: 0;
   z-index: 1100;
   margin-top: -1px;
-  border: 1px solid scale-color($primary, $lightness: 90%);;
+  border: 1px solid scale-color-diff();;
   background-color: $secondary;
   @include box-shadow(0 1px 1px rgba($primary, 0.2));
 
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 22954599a..1d479ca60 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -44,7 +44,7 @@
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  border-top: 1px solid scale-color($primary, $lightness: 90%);
+  border-top: 1px solid scale-color-diff();
 
   > tbody > tr {
     background-color: $secondary;
@@ -241,7 +241,7 @@
     display: none;
   }
   > footer {
-    border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+    border-bottom: 1px solid scale-color-diff();
     border-top: 0;
     padding: 7px 10px;
     background-color: scale-color($primary, $lightness: 95%);
@@ -305,7 +305,7 @@
 .list-controls {
   .home {
     color: $primary;
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
   }
 
   .badge-category {
@@ -398,7 +398,7 @@ span.posted {
   margin: 1px 0 0;
   list-style: none;
   background-color: $secondary;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@@ -452,7 +452,7 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: scroll;
   position: absolute;
-  border: 1px solid scale-color($primary, $lightness: 90%);;
+  border: 1px solid scale-color-diff();;
   background-color: $secondary;
   height: 200px;
   padding: 8px 5px 0 7px;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 73f6ab8bf..dd7cbd57a 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -87,7 +87,7 @@ button {
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid scale-color($primary, $lightness: 90%);
+  border: 1px solid scale-color-diff();
   position: absolute;
   text-align: left;
   bottom: 0;
@@ -264,7 +264,7 @@ a.star {
       border-left: 1px solid scale-color($primary, $lightness: 95%);;
       padding: 0 23px;
       color: $primary;
-      background: scale-color($primary, $lightness: 90%);
+      background: scale-color-diff();
       &:hover {
         background: scale-color($primary, $lightness: 75%);
         color: $primary;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 9a5fbe88c..e3aa0327b 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -65,7 +65,7 @@
     display: none;
   }
   border: none;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   color: $primary;
   width: 130px;
   height: 34px;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 9acae27ef..90919d3cc 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -81,7 +81,7 @@
   display: block;
   width: 220px;
   min-height: 200px;
-  background-color: scale-color($primary, $lightness: 90%);
+  background-color: scale-color-diff();
   color: $primary;
   word-wrap: break-word;
 }
@@ -104,7 +104,7 @@
   margin-bottom: 50px;
 
   .about {
-    background-color: scale-color($primary, $lightness: 90%);
+    background-color: scale-color-diff();
     background-position: center center;
     background-size: cover;
     margin-bottom: 10px;
@@ -131,7 +131,7 @@
       }
 
       img.avatar {
-        border: 3px solid scale-color($primary, $lightness: 90%);
+        border: 3px solid scale-color-diff();
         margin-bottom: 4px;
       }
 
@@ -221,7 +221,7 @@
     .item {
       padding: 10px 8px;
       background-color: $secondary;
-      border-bottom: 1px solid scale-color($primary, $lightness: 90%);
+      border-bottom: 1px solid scale-color-diff();
     }
     .type {
       color: scale-color($primary, $lightness: 50%);