Pretty highlighted diffs for every theme

app/assets/stylesheets/highlight/dark.scss

@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(51, 255, 51, #808080);
+      @include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.2), #808080);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(255, 51, 51, #808080);
+      @include diff_background(rgba(255, 51, 51, 0.2), rgba(255, 51, 51, 0.2), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
 

app/assets/stylesheets/highlight/monokai.scss

@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #f8f8f2;
+    color: rgba(255, 255, 255, 0.3);
   }
 
   // Code itself
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(156, 175, 183, #808080);
+      @include diff_background(rgba(166, 226, 46, 0.2), rgba(166, 226, 46, 0.3), #808080);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(254, 147, 140, #808080);
+      @include diff_background(rgba(254, 147, 140, 0.2), rgba(254, 147, 140, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
 

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #93a1a1;
+    color: rgba(255, 255, 255, 0.3);
   }
 
   // Code itself
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(255, 255, 255, #808080);
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #808080);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(255, 51, 51, #808080);
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
     }
   }
 

app/assets/stylesheets/highlight/solarized_light.scss

@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #586e75;
+    color: rgba(0, 0, 0, 0.3);
   }
 
   // Code itself
@@ -22,11 +22,16 @@
   // Diff line
   .line_holder {
     .diff-line-num.new, .line_content.new {
-      @include diff_background(92, 164, 169, #FAF3DD);
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #FAF3DD);
     }
 
     .diff-line-num.old, .line_content.old {
-      @include diff_background(237, 106, 90, #FAF3DD);
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #FAF3DD);
+    }
+
+    .line_content.match {
+      color: rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.4);
     }
   }
 

app/assets/stylesheets/pages/diff.scss

@@ -353,17 +353,14 @@
   }
 }
 
-@mixin diff_background($r, $g, $b, $custom-border) {
-  /* Fallback for web browsers that doesn't support RGBa */
-  background: rgb($r, $g, $b);
-  /* RGBa with 0.3 opacity */
-  background: rgba($r, $g, $b, 0.3);
+@mixin diff_background($background, $idiff, $border) {
+  background: $background;
 
-  &.diff-line-num {
-    border-right-color: $custom-border !important;
+  &.line_content span.idiff {
+    background: $idiff;
   }
 
-  &.line_content span.idiff {
-    background: rgb($r, $g, $b);
+  &.diff-line-num {
+    border-color: $border;
   }
 }