From 3edf0e662fb50496731df1fe28ba5b260424582f Mon Sep 17 00:00:00 2001
From: Kane York <rikingcoding@gmail.com>
Date: Tue, 18 Aug 2015 12:04:35 -0700
Subject: [PATCH 1/5] FIX: Make user card colors absolute (xcpt shadow)

---
 app/assets/stylesheets/desktop/user-card.scss | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index 6781e222d38..d2e4b60abc1 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -1,4 +1,5 @@
 // styles that apply to the "share" popup when sharing a link to a post or topic
+// Colors should mostly be absolute here, it will look the same in dark & light themes
 
 #user-card {
   position: absolute;
@@ -6,20 +7,19 @@
   left: -9999px;
   top: -9999px;
   z-index: 990;
-  box-shadow: 0 2px 6px rgba(0,0,0,.6);
+  box-shadow: 0 2px 12px rgba($primary, .6);
   margin-top: -2px;
-  background-color: $primary;
-  color: $secondary;
+  color: #ffffff;
   background-size: cover;
-  background-position: center center;
+  background: #222222 center center;
   min-height: 175px;
+  -webkit-transition: opacity .2s, -webkit-transform .2s;
+          transition: opacity .2s, transform .2s;
+
   opacity: 0;
   -webkit-transform: scale(.9);
       -ms-transform: scale(.9);
           transform: scale(.9);
-  -webkit-transition: opacity .2s, -webkit-transform .2s;
-          transition: opacity .2s, transform .2s;
-
   &.show {
     opacity: 1;
     -webkit-transform: scale(1);
@@ -29,7 +29,7 @@
 
   .card-content {
     padding: 12px 12px 0 12px;
-    background: rgba($primary, .85);
+    background: rgba(#222222, .85);
     margin-top: 80px;
 
     &:after {
@@ -55,7 +55,6 @@
   }
 
   h1 {
-    display: inline-block;
     min-width: 120px;
     font-size: 1.786em;
     line-height: 1.25;
@@ -65,11 +64,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     a {
-      color: $secondary;
+      color: #222;
     }
     i {
       font-size: .8em;
-      color: $secondary;
+      color: #222;
     }
   }
 
@@ -83,7 +82,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     a {
-      color: $secondary;
+      color: #fff;
     }
   }
 
@@ -91,11 +90,11 @@
     font-size: 0.929em;
     font-weight: normal;
     margin-top: 0;
-    color: dark-light-diff($secondary, $primary, 25%, -25%);
+    color: scale-color(#fff, $lightness: 25%);
     overflow: hidden;
     text-overflow: ellipsis;
     a {
-      color: dark-light-diff($primary, $secondary, 50%, -50%);
+      color: scale-color(#222, $lightness: 50%);
     }
   }
 
@@ -103,10 +102,10 @@
     font-size: 0.929em;
     font-weight: normal;
     margin-top: 0;
-    color: $primary;
+    color: #222;
 
     .group-link {
-      color: $primary;
+      color: #222;
     }
   }
 
@@ -118,11 +117,11 @@
       display: inline;
       margin-right: 5px;
       .desc, a {
-        color: dark-light-diff($secondary, $primary, 50%, -50%);
+        color: scale-color(#fff, $lightness: 50%);
       }
     }
-    div {display: inline; color: scale-color($primary, $lightness: 50%);
-    .group-link {color: scale-color($primary, $lightness: 50%);}
+    div {display: inline; color: scale-color(#222, $lightness: 50%);
+    .group-link {color: scale-color(#222, $lightness: 50%);}
     }
   }
 
@@ -140,7 +139,7 @@
     clear: left;
 
     a {
-      color: $secondary;
+      color: #fff;
       text-decoration: underline;
     }
     img {
@@ -148,7 +147,7 @@
     }
 
     a.mention {
-      background-color: dark-light-diff($secondary, $primary, 50%, -60%);
+      background-color: scale-color(#fff, $lightness: 50%);
     }
     .overflow {
       max-height: 60px;
@@ -180,7 +179,7 @@
   }
 
   .new-user a {
-    color: scale-color($primary, $lightness: 70%);
+    color: scale-color(#222, $lightness: 70%);
   }
 
   &.show-badges {
@@ -210,12 +209,12 @@
 
       .user-badge {
         background: transparent;
-        color: dark-light-diff($primary, $secondary, 50%, -50%);
-        border-color: dark-light-diff($primary, $secondary, 50%, -50%);
+        color: scale-color(#222, $lightness: 50%);
+        border-color: scale-color(#222, $lightness: 50%);
       }
 
       h3 {
-        color: $primary;
+        color: #222;
         font-size: 1em;
         margin-bottom: -8px;
       }
@@ -242,6 +241,6 @@
     right: 12px;
     bottom: 12px;
     font-size: 2.143em;
-    i {color: $secondary;}
+    i {color: #fff;}
   }
 }

From a4da72a83b93eeceae467173a132c5a912fa7ae6 Mon Sep 17 00:00:00 2001
From: Kane York <rikingcoding@gmail.com>
Date: Tue, 18 Aug 2015 12:23:06 -0700
Subject: [PATCH 2/5] FIX: Dark theme fixes for admin, quotes, code

---
 .../stylesheets/common/admin/admin_base.scss       | 10 +++++-----
 .../stylesheets/common/base/code_highlighting.scss | 14 +++++++-------
 app/assets/stylesheets/common/base/discourse.scss  |  4 ++--
 app/assets/stylesheets/common/base/topic-post.scss | 10 +++++-----
 .../stylesheets/common/components/buttons.css.scss |  7 +++----
 .../stylesheets/common/foundation/variables.scss   |  7 +++++++
 6 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index ca47c70d4ce..33da77e84ca 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -129,16 +129,16 @@ td.flaggers td {
 }
 
 .admin-controls {
-  background-color: dark-light-diff($primary, $secondary, 90%, -75%);
+  background-color: dark-light-diff($primary, $secondary, 90%, -65%);
   padding: 10px 10px 3px 0;
   @include clearfix;
   .nav.nav-pills {
     li.active {
       a {
-        border-color: dark-light-diff($primary, $secondary, 90%, -60%);
-        background-color: lighten($primary, 40%);
+        border-color: dark-light-diff($primary, $secondary, 90%, -90%);
+        background-color: dark-light-diff($primary, $secondary, 40%, -10%);
         &:hover {
-          background-color: lighten($primary, 40%);
+          background-color: dark-light-diff($primary, $secondary, 40%, -10%);
         }
       }
     }
@@ -1113,7 +1113,7 @@ table.api-keys {
 .content-list {
 
   h3 {
-    color: dark-light-diff($primary, $secondary, 50%, -60%);
+    color: dark-light-diff($primary, $secondary, 50%, -20%);
     font-size: 1.071em;
     padding-left: 5px;
     margin-bottom: 10px;
diff --git a/app/assets/stylesheets/common/base/code_highlighting.scss b/app/assets/stylesheets/common/base/code_highlighting.scss
index 02aa19e7274..c5fe8d617c6 100644
--- a/app/assets/stylesheets/common/base/code_highlighting.scss
+++ b/app/assets/stylesheets/common/base/code_highlighting.scss
@@ -7,7 +7,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs {
   display: block;
   padding: 0.5em;
-  color: #333;
+  color: dark-light-choose(#333, #f8f8f8);
 }
 
 .hljs-comment,
@@ -26,7 +26,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs-subst,
 .hljs-request,
 .hljs-status {
-  color: #333;
+  color: dark-light-choose(#333, #f8f8f8);
   font-weight: bold;
 }
 
@@ -40,7 +40,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs-tag .hljs-value,
 .hljs-phpdoc,
 .tex .hljs-formula {
-  color: #d14;
+  color: dark-light-choose(#d14, #f66);
 }
 
 .hljs-title,
@@ -70,14 +70,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs-tag .hljs-title,
 .hljs-rules .hljs-property,
 .django .hljs-tag .hljs-keyword {
-  color: #000080;
+  color: dark-light-choose(#000080, #99f);
   font-weight: normal;
 }
 
 .hljs-attribute,
 .hljs-variable,
 .lisp .hljs-body {
-  color: #008080;
+  color: dark-light-choose(#008080, #0ee);
 }
 
 .hljs-regexp {
@@ -132,8 +132,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 */
 
 p > code, li > code, pre > code {
-  color: #333;
-  background: #f8f8f8;
+  color: dark-light-choose(#333, #f8f8f8);
+  background: dark-light-choose(#f8f8f8, #333);
 }
 
 // removed some unnecessary styles here
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 43da67c1e50..ce6ca6682c3 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -32,8 +32,8 @@ small {
 
 
 blockquote {
-  background-color: dark-light-diff($primary, $secondary, 97%, -45%);
-  border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
+  border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  background-color: dark-light-diff($primary, $secondary, 97%, -65%);
   overflow: hidden;
   clear: both;
 }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index ec590ae39c6..0013fab8cd2 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -50,8 +50,8 @@ aside.quote {
   .badge-wrapper { margin-left: 5px; }
 
   .title {
-    border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
-    background-color: dark-light-diff($primary, $secondary, 97%, -45%);
+    border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
+    background-color: dark-light-diff($primary, $secondary, 97%, -65%);
     color: scale-color($primary, $lightness: 30%);
     // IE will screw up the blockquote underneath if bottom padding is 0px
     padding: 12px 12px 1px 12px;
@@ -113,8 +113,8 @@ aside.quote {
 .quote-button {
   display: none;
   position: absolute;
-  background-color: scale-color($primary, $lightness: 50%);
-  color: $secondary;
+  background-color: dark-light-diff($primary, $secondary, 50%, -50%);
+  color: dark-light-choose($secondary, $primary);
   padding: 10px;
   z-index: 401;
 
@@ -124,7 +124,7 @@ aside.quote {
   }
 
   &:hover {
-    background-color: scale-color($primary, $lightness: 40%);
+    background-color: dark-light-diff($primary, $secondary, 40%, -40%);
     cursor: pointer;
   }
 }
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index 2821356313a..f55ff6d34e3 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -73,17 +73,16 @@
 
 .btn-primary {
   border: none;
-  color: $secondary;
   font-weight: normal;
-  color: #fff;
-  background: $tertiary;
+  color: dark-light-choose($primary, scale-color($primary, $lightness: 60%));
+  background: dark-light-choose($tertiary, $tertiary);
 
   &[href] {
     color: $secondary;
   }
   &:hover {
     color: #fff;
-    background: scale-color($tertiary, $lightness: -20%);
+    background: dark-light-choose(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -20%));
   }
   &:active {
     @include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 01e77684b36..0c51ce420a6 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -42,3 +42,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
     @return scale-color($adjusted-color, $lightness: $darkness);
   }
 }
+@function dark-light-choose($light-theme-result, $dark-theme-result) {
+  @if brightness($primary) < brightness($secondary) {
+    @return $light-theme-result;
+  } @else {
+    @return $dark-theme-result;
+  }
+}

From c8c3b057cbe1a4ddb0acc87315ed7ccdb127426f Mon Sep 17 00:00:00 2001
From: Kane York <rikingcoding@gmail.com>
Date: Tue, 18 Aug 2015 12:28:58 -0700
Subject: [PATCH 3/5] FIX: Unread posts in dark theme

---
 app/assets/stylesheets/common/components/badges.css.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index 8008d48b210..9b5248091fe 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -244,9 +244,9 @@
   // New posts
 
   &.new-posts, &.unread-posts {
-    background-color: scale-color($tertiary, $lightness: 50%);
+    background-color: dark-light-choose(scale-color($tertiary, $lightness: 50%), scale-color($tertiary, $lightness: 20%));
     color: $secondary;
-    font-weight: normal;
+    font-weight: dark-light-choose(normal, bold);
   }
 
   &.new-topic {

From 173126673b8a56d47c89d356f02c09be60b2d10d Mon Sep 17 00:00:00 2001
From: Kane York <rikingcoding@gmail.com>
Date: Tue, 18 Aug 2015 12:53:44 -0700
Subject: [PATCH 4/5] FIX: Apply blockquote colors to onebox

---
 app/assets/stylesheets/common/base/onebox.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 2ff7b0d3aa1..c2072b81187 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 dark-light-diff($primary, $secondary, 90%, -65%);
-  background: dark-light-diff($primary, $secondary, 97%, -45%);
+  border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  background-color: dark-light-diff($primary, $secondary, 97%, -65%);
   font-size: 1em;
   > .source {
     margin-bottom: 12px;
@@ -90,8 +90,8 @@ a.loading-onebox {
 
 aside.onebox {
   padding: 12px 25px 12px 12px;
-  border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
-  background: dark-light-diff($primary, $secondary, 97%, -45%);
+  border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
+  background-color: dark-light-diff($primary, $secondary, 97%, -65%);
   font-size: 1em;
 
   header {
@@ -148,8 +148,8 @@ aside.onebox .onebox-body .onebox-avatar {
 
 blockquote {
   aside.onebox {
-    background: dark-light-diff($primary, $secondary, 97%, -45%);
-    border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
+    border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
+    background-color: dark-light-diff($primary, $secondary, 97%, -65%);
   }
 }
 

From 6a0eba3ba228e553527d60a9d87da5f160d0d8bd Mon Sep 17 00:00:00 2001
From: Kane York <rikingcoding@gmail.com>
Date: Tue, 18 Aug 2015 13:20:07 -0700
Subject: [PATCH 5/5] Oops, that should fix it..

---
 app/assets/stylesheets/common/components/buttons.css.scss | 4 ++--
 app/assets/stylesheets/desktop/user-card.scss             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index f55ff6d34e3..2ea0e60a386 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -74,8 +74,8 @@
 .btn-primary {
   border: none;
   font-weight: normal;
-  color: dark-light-choose($primary, scale-color($primary, $lightness: 60%));
-  background: dark-light-choose($tertiary, $tertiary);
+  color: dark-light-choose(#fff, scale-color($primary, $lightness: 60%));
+  background: $tertiary;
 
   &[href] {
     color: $secondary;
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index d2e4b60abc1..e04cecafa0d 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -64,11 +64,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     a {
-      color: #222;
+      color: #fff;
     }
     i {
       font-size: .8em;
-      color: #222;
+      color: #fff;
     }
   }