diff --git a/scss/backend.scss b/scss/backend.scss
index 0185712..3e279a3 100644
--- a/scss/backend.scss
+++ b/scss/backend.scss
@@ -21,13 +21,14 @@ $border-radius: 5px;
 //
 //
 
-@import 'import/colors';
-@import 'import/main';
-@import 'import/nav';
+@import 'import/_colors.scss';
+@import 'import/include.scss';
+@import 'import/_main.scss';
+@import 'import/_nav.scss';
 
 @import 'import/repository.scss';
 @import 'import/explore.scss';
 @import 'import/user.scss';
 @import 'import/dashboard.scss';
 
-@import 'import/footer';
+@import 'import/_footer.scss';
diff --git a/scss/frontend.scss b/scss/frontend.scss
index eca4220..5f2397f 100644
--- a/scss/frontend.scss
+++ b/scss/frontend.scss
@@ -21,12 +21,13 @@ $border-radius: 5px;
 //
 //
 
-@import 'import/colors';
-@import 'import/main';
-@import 'import/nav';
+@import 'import/_colors.scss';
+@import 'import/include.scss';
+@import 'import/_main.scss';
+@import 'import/_nav.scss';
 
 @import 'import/repository.scss';
 @import 'import/explore.scss';
 @import 'import/user.scss';
 
-@import 'import/footer';
+@import 'import/_footer.scss';
diff --git a/scss/import/dashboard.scss b/scss/import/dashboard.scss
index 069eb33..c2b2003 100644
--- a/scss/import/dashboard.scss
+++ b/scss/import/dashboard.scss
@@ -44,6 +44,7 @@
   .container {
     .grid {
       .column.ten {
+        @include contribution-heatmap;
         .news {
           .grid {
             .column.fourteen {
diff --git a/scss/import/include.scss b/scss/import/include.scss
new file mode 100644
index 0000000..42f875a
--- /dev/null
+++ b/scss/import/include.scss
@@ -0,0 +1,54 @@
+
+@mixin contribution-heatmap {
+  div {
+    h4.total-contributions {}
+    svg.vch__wrapper {
+      g.vch__months__labels__wrapper {
+        text.vch__month__label {
+          fill: $white-dark;
+        }
+      }
+      g.vch__days__labels__wrapper {
+        text.vch__day__label {
+          fill: $white-dark;
+        }
+      }
+      g.vch__legend__wrapper {
+        text {
+          fill: $white-dark;
+        }
+        rect {
+          @include contribution-heatmap-colors;
+        }
+      }
+      g.vch__year__wrapper {
+        g.vch__month__wrapper {
+          rect.vch__day__square {
+            @include contribution-heatmap-colors;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin contribution-heatmap-colors {
+  &[style*="fill: rgb(244, 244, 244);"] {
+    fill: $bg50 !important;
+  }
+  &[style*="fill: rgb(216, 239, 191);"] {
+    fill: $bg60 !important;
+  }
+  &[style*="fill: rgb(159, 219, 129);"] {
+    fill: $bg70 !important;
+  }
+  &[style*="fill: rgb(102, 199, 75);"] {
+    fill: $bg80 !important;
+  }
+  &[style*="fill: rgb(96, 153, 38);"] {
+    fill: $red-dark !important;
+  }
+  &[style*="fill: rgb(2, 89, 0);"] {
+    fill: $red !important;
+  }
+}
diff --git a/scss/import/user.scss b/scss/import/user.scss
index 60f140a..40f2197 100644
--- a/scss/import/user.scss
+++ b/scss/import/user.scss
@@ -173,11 +173,14 @@
   .container {
     .grid {
       .eleven.column {
-        #user-heatmap {
-          @if $nojavascript == true {
+        @if $nojavascript == true {
+          #user-heatmap {
             display: none;
           }
         }
+        @if $nojavascript == false {
+          @include contribution-heatmap;
+        }
         .feeds {
           .news {
             .content {