diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss
index 7b52bd911..a4b9c4313 100644
--- a/build/scss/_mixins.scss
+++ b/build/scss/_mixins.scss
@@ -266,6 +266,32 @@
       border-left-color: $bg-color;
     }
   }
+
+  @each $name, $color in $theme-colors {
+    &.bg-#{$name},
+    &.bg-gradient-#{$name} {
+      .direct-chat-timestamp {
+        @if (color-yiq($color) == $yiq-text-dark) {
+          color: lighten(color-yiq($color), 10%);
+        } @else {
+          color: darken(color-yiq($color), 20%);
+        }
+      }
+    }
+  }
+
+  @each $name, $color in $colors {
+    &.bg-#{$name},
+    &.bg-gradient-#{$name} {
+      .direct-chat-timestamp {
+        @if (color-yiq($color) == $yiq-text-dark) {
+          color: lighten(color-yiq($color), 10%);
+        } @else {
+          color: darken(color-yiq($color), 20%);
+        }
+      }
+    }
+  }
 }
 
 // Background Variant
@@ -281,13 +307,13 @@
     &.btn {
       &:hover {
         border-color: darken($color, 10%);
-        color: color-yiq(darken($color, 7.5%));
+        color: darken(color-yiq($color), 7.5%);
       }
 
       &:active,
       &.active {
         border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
+        color: darken(color-yiq($color), 10%);
       }
     }
   }
@@ -311,14 +337,14 @@
       &:hover {
         @include bg-gradient-variant('&', darken($color, 7.5%));
         border-color: darken($color, 10%);
-        color: color-yiq(darken($color, 7.5%));
+        color: darken(color-yiq($color), 7.5%);
       }
 
       &:active,
       &.active {
         @include bg-gradient-variant('&', darken($color, 10%));
         border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
+        color: darken(color-yiq($color), 10%);
       }
     }
   }