diff --git a/build/scss/_colors.scss b/build/scss/_colors.scss
index f0189c064..2b42052de 100644
--- a/build/scss/_colors.scss
+++ b/build/scss/_colors.scss
@@ -70,3 +70,13 @@ a.text-muted:hover {
     color: lighten($gray-500, 20%);
   }
 }
+
+// Accent colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include accent-variant($name, $color);
+}
+
+// Accent colors (colors)
+@each $name, $color in $colors {
+  @include accent-variant($name, $color);
+}
diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss
index 0ebc93d0f..68f03f9a3 100644
--- a/build/scss/_mixins.scss
+++ b/build/scss/_mixins.scss
@@ -511,6 +511,36 @@
   }
 }
 
+// Accent Variant
+@mixin accent-variant($name, $color) {
+  &.accent-#{$name} {
+    $link-color: $color;
+    $link-hover-color: darken($color, 15%);
+    $pagination-active-bg: $color;
+    $pagination-active-border-color: $color;
+
+    a {
+      color: $link-color;
+
+      @include hover {
+        color: $link-hover-color;
+      }
+    }
+
+    .page-item {
+      &.active .page-link {
+        background-color: $pagination-active-bg;
+        border-color: $pagination-active-border-color;
+      }
+
+      &.disabled .page-link {
+        background-color: $pagination-disabled-bg;
+        border-color: $pagination-disabled-border-color;
+      }
+    }
+  }
+}
+
 // ETC
 @mixin translate($x, $y) {
   transform: translate($x, $y);
diff --git a/docs/layout.md b/docs/layout.md
index 3d1fa93c9..015d58670 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -52,9 +52,15 @@ AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light
 - `.navbar-*`
 - `.sidebar-dark-*`
 - `.sidebar-light-*`
+- `.accent-*`
+
+> ###### New
+> You can use override the link/accent color in AdminLTE, you can add `.accent-*` to `body`.
+{: .quote-info}
 
 > ###### Info
 > You can combine `.navbar-*` with `.navbar-light` or `.navbar-dark`.
+{: .quote-info}
 
 The following colors are available: