From 65a3db7be5049f9711cb42cd697d2ff4d51feeec Mon Sep 17 00:00:00 2001
From: Thibaut <thibaut@me.com>
Date: Sun, 1 Mar 2015 11:07:08 -0500
Subject: [PATCH] Grayscale + brighten dark doc icons in dark theme

Fixes #160.
---
 assets/stylesheets/global/_icons.scss | 29 +++++++++++++++++----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss
index b5444811..088eb94a 100644
--- a/assets/stylesheets/global/_icons.scss
+++ b/assets/stylesheets/global/_icons.scss
@@ -11,6 +11,13 @@
   %icon { background-image: image-url('icons@2x.png'); }
 }
 
+%darkIconFix {
+  @if $style == 'dark' {
+    filter: invert(100%) grayscale(100%);
+    -webkit-filter: invert(100%) grayscale(100%);
+  }
+}
+
 %icon-dir                   { background-position: 0 0; }
 %icon-search                { background-position: -1rem 0; }
 %icon-link                  { background-position: -2.25rem -.25rem; }
@@ -18,20 +25,20 @@
 %icon-close-white           { background-position: -4rem 0; }
 %icon-settings              { background-position: -5rem 0; }
 %icon-check                 { background-position: -6rem 0; }
-._icon-http:before          { background-position: -7rem 0; }
-._icon-jquery:before        { background-position: -8rem 0; }
-._icon-underscore:before    { background-position: -9rem 0; }
+._icon-http:before          { background-position: -7rem 0; @extend %darkIconFix !optional; }
+._icon-jquery:before        { background-position: -8rem 0; @extend %darkIconFix !optional; }
+._icon-underscore:before    { background-position: -9rem 0; @extend %darkIconFix !optional; }
 ._icon-html:before          { background-position: 0 -1rem; }
 ._icon-css:before           { background-position: -1rem -1rem; }
 ._icon-dom:before           { background-position: -2rem -1rem; }
 ._icon-dom_events:before    { background-position: -3rem -1rem; }
 ._icon-javascript:before    { background-position: -4rem -1rem; }
-._icon-backbone:before      { background-position: -5rem -1rem; }
+._icon-backbone:before      { background-position: -5rem -1rem; @extend %darkIconFix !optional; }
 ._icon-node:before          { background-position: -6rem -1rem; }
 ._icon-sass:before          { background-position: -7rem -1rem; }
 ._icon-less:before          { background-position: -8rem -1rem; }
 ._icon-angular:before       { background-position: -9rem -1rem; }
-._icon-coffeescript:before  { background-position: 0 -2rem; }
+._icon-coffeescript:before  { background-position: 0 -2rem; @extend %darkIconFix !optional; }
 ._icon-ember:before         { background-position: -1rem -2rem; }
 %icon-menu                  { background-position: -2rem -2rem; }
 %icon-home                  { background-position: -3rem -2rem; }
@@ -49,7 +56,7 @@
 ._icon-postgresql:before    { background-position: -3rem -3rem; }
 ._icon-d3:before            { background-position: -4rem -3rem; }
 ._icon-knockout:before      { background-position: -5rem -3rem; }
-._icon-moment:before        { background-position: -6rem -3rem; }
+._icon-moment:before        { background-position: -6rem -3rem; @extend %darkIconFix !optional; }
 ._icon-c:before             { background-position: -7rem -3rem; }
 %icon-path                  { background-position: -8rem -3rem; }
 ._icon-yii:before,
@@ -63,9 +70,9 @@
 ._icon-haskell:before       { background-position: -6rem -4rem; }
 ._icon-requirejs:before     { background-position: -7rem -4rem; }
 ._icon-chai:before          { background-position: -8rem -4rem; }
-._icon-sinon:before         { background-position: -9rem -4rem; }
+._icon-sinon:before         { background-position: -9rem -4rem; @extend %darkIconFix !optional; }
 ._icon-cordova:before       { background-position: 0 -5rem; }
-._icon-markdown:before      { background-position: -1rem -5rem; }
+._icon-markdown:before      { background-position: -1rem -5rem; @extend %darkIconFix !optional; }
 ._icon-django:before        { background-position: -2rem -5rem; }
 ._icon-xpath:before         { background-position: -3rem -5rem; }
 ._icon-nginx:before         { background-position: -4rem -5rem; }
@@ -73,7 +80,7 @@
 ._icon-marionette:before    { background-position: -6rem -5rem; }
 ._icon-mongoose:before      { background-position: -7rem -5rem; }
 ._icon-phpunit:before       { background-position: -8rem -5rem; }
-._icon-nokogiri:before      { background-position: -9rem -5rem; }
+._icon-nokogiri:before      { background-position: -9rem -5rem; @extend %darkIconFix !optional; }
 ._icon-rethinkdb:before     { background-position: 0 -6rem; }
 ._icon-react:before         { background-position: -1rem -6rem; }
 ._icon-socketio:before      { background-position: -2rem -6rem; }
@@ -86,7 +93,7 @@
 %icon-check-white           { background-position: -9rem -6rem; }
 %icon-light                 { background-position: 0 -7rem; }
 %icon-light-white           { background-position: -1rem -7rem; }
-._icon-iojs:before          { background-position: -2rem -7rem; }
-._icon-lua:before           { background-position: -3rem -7rem; }
+._icon-iojs:before          { background-position: -2rem -7rem; @extend %darkIconFix !optional; }
+._icon-lua:before           { background-position: -3rem -7rem; @extend %darkIconFix !optional; }
 ._icon-clojure:before       { background-position: -4rem -7rem; }
 ._icon-symfony:before       { background-position: -5rem -7rem; }