diff --git a/src/scss/demo/_highlight.scss b/src/scss/demo/_highlight.scss
index 9394367cd..3a42cfd20 100644
--- a/src/scss/demo/_highlight.scss
+++ b/src/scss/demo/_highlight.scss
@@ -3,7 +3,7 @@ $code-yellow: #ffe484;
 $code-purple: #d9a9ff;
 $code-red: #ff8383;
 $code-blue: #93ddfd;
-//$code-white: #ffffff;
+//$code-white: $white;
 $code-gray: #a0aec0;
 
 pre.highlight,
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index 5a81ca293..16b4bbeca 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -196,7 +196,7 @@ Navbar
         .navbar-dark {
           .nav-item.active {
             .nav-link {
-              background-color: rgba(#000, .1);
+              background-color: rgba($black, .1);
             }
           }
         }
diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss
index 3535eda8c..2d05372eb 100644
--- a/src/scss/mixins/_mixins.scss
+++ b/src/scss/mixins/_mixins.scss
@@ -38,7 +38,7 @@
     background: $gray-500;
 
     @if ($is-dark) {
-      background: mix(#ffffff, $dark, 20%);
+      background: mix($white, $dark, 20%);
     } @else {
       background: $gray-500;
     }
diff --git a/src/scss/ui/_alerts.scss b/src/scss/ui/_alerts.scss
index 269bcb4ab..818526f07 100644
--- a/src/scss/ui/_alerts.scss
+++ b/src/scss/ui/_alerts.scss
@@ -8,10 +8,10 @@
   }
 }
 
-.alert{
-  a{
+.alert {
+  a {
     display: inline-block;
-    height:100%;
+    height: 100%;
 
     .icon {
       height: 100%;
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index 00bf27605..8247874b2 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -26,7 +26,7 @@
     right: 0;
     bottom: 0;
     border-radius: $border-radius-full;
-    box-shadow: 0 0 0 2px #fff;
+    box-shadow: 0 0 0 2px $white;
   }
 
   @at-root a#{&} {
@@ -73,7 +73,7 @@
 .avatar-list-stacked {
   .avatar {
     margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px #fff;
+    box-shadow: 0 0 0 2px $white;
 
     @at-root .card-footer & {
       box-shadow: 0 0 0 2px $card-cap-bg;
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index 14bad692d..4ffcd6c93 100644
--- a/src/scss/ui/_calendars.scss
+++ b/src/scss/ui/_calendars.scss
@@ -88,7 +88,7 @@
   &.range-start,
   &.range-end {
     .date-item {
-      color: #fff;
+      color: $white;
       background: $primary;
       border-color: $primary;
     }
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index 5e485190b..c6b9e1b25 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -347,7 +347,7 @@ Card code
 
   pre {
     margin: 0;
-    color: #ffffff;
+    color: $white;
     text-shadow: none;
     background: transparent;
   }
diff --git a/src/scss/ui/_dropdowns.scss b/src/scss/ui/_dropdowns.scss
index 61a21aecd..17dba413a 100644
--- a/src/scss/ui/_dropdowns.scss
+++ b/src/scss/ui/_dropdowns.scss
@@ -88,7 +88,7 @@
 }
 
 .dropright {
-  >.dropdown-menu {
+  > .dropdown-menu {
     margin-top: subtract(-$dropdown-padding-y, 1px);
     margin-left: 0;
   }
@@ -103,7 +103,7 @@
 .dropdown-menu-card {
   padding: 0;
 
-  >.card {
+  > .card {
     margin: 0;
     border: 0;
     box-shadow: none;
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index 33dbb5a9d..e05edb0a8 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -61,7 +61,7 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px #ffffff inset;
+    box-shadow: 0 0 0 1000px $white inset;
   }
 
   &:disabled,
@@ -143,7 +143,7 @@ Form help
 
   &:hover,
   &[aria-describedby] {
-    color: #ffffff;
+    color: $white;
     background: $primary;
   }
 }
diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
index f505ebe3e..9eafdd787 100644
--- a/src/scss/ui/_lists.scss
+++ b/src/scss/ui/_lists.scss
@@ -85,7 +85,7 @@
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
-  color: #ffffff;
+  color: $white;
   text-align: center;
   background: $text-muted;
   border-radius: $border-radius-full;
@@ -198,7 +198,7 @@ Inline list
 
 .list-inline-dots {
   .list-inline-item + .list-inline-item:before {
-      content: ' · ';
-      margin-inline-end: $list-inline-padding;
+    content: ' · ';
+    margin-inline-end: $list-inline-padding;
   }
 }
\ No newline at end of file
diff --git a/src/scss/ui/_markdown.scss b/src/scss/ui/_markdown.scss
index 24ea2eef7..a8b64d4f8 100644
--- a/src/scss/ui/_markdown.scss
+++ b/src/scss/ui/_markdown.scss
@@ -40,7 +40,7 @@ Markdown
     }
   }
 
-  >hr {
+  > hr {
     @include media-breakpoint-up(md) {
       margin-top: 3em;
       margin-bottom: 3em;
diff --git a/src/scss/ui/_pagination.scss b/src/scss/ui/_pagination.scss
index 6ec9ab69e..428b9a1c4 100644
--- a/src/scss/ui/_pagination.scss
+++ b/src/scss/ui/_pagination.scss
@@ -32,7 +32,7 @@
   color: $text-muted;
   text-transform: uppercase;
 
-  .page-item.disabled &{
+  .page-item.disabled & {
     color: $pagination-disabled-color;
   }
 }
@@ -46,7 +46,7 @@
     color: $link-color;
   }
 
-  .page-item.disabled &{
+  .page-item.disabled & {
     color: $pagination-disabled-color;
   }
 }
diff --git a/src/scss/ui/_ribbons.scss b/src/scss/ui/_ribbons.scss
index bfd6c108c..a44974eda 100644
--- a/src/scss/ui/_ribbons.scss
+++ b/src/scss/ui/_ribbons.scss
@@ -9,7 +9,7 @@
   font-size: $h6-font-size;
   font-weight: $font-weight-bold;
   line-height: 1.5rem;
-  color: #fff;
+  color: $white;
   text-align: center;
   text-transform: uppercase;
   background: $primary;
diff --git a/src/scss/ui/_steps.scss b/src/scss/ui/_steps.scss
index 7234d126f..2f9850954 100644
--- a/src/scss/ui/_steps.scss
+++ b/src/scss/ui/_steps.scss
@@ -81,7 +81,7 @@
     box-sizing: content-box;
     display: block;
     content: "";
-    border: 2px solid #fff;
+    border: 2px solid $white;
     border-radius: $border-radius-full;
     transform: translateX(-50%);
   }
@@ -90,7 +90,7 @@
     font-weight: $font-weight-bold;
 
     &:before {
-      background: #fff;
+      background: $white;
     }
 
     & ~ .step-item {
@@ -123,7 +123,7 @@
 
     &.active ~ .step-item {
       &:before {
-        background: #fff;
+        background: $white;
       }
     }
   }
diff --git a/src/scss/ui/_toasts.scss b/src/scss/ui/_toasts.scss
index cf264fd4e..4665406ab 100644
--- a/src/scss/ui/_toasts.scss
+++ b/src/scss/ui/_toasts.scss
@@ -1,6 +1,7 @@
 .toast-header {
   user-select: none;
 }
-.toast button[data-dismiss="toast"]{
+
+.toast button[data-dismiss="toast"] {
   outline: none;
 }
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index d5fb0768c..8a50302c6 100644
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -111,7 +111,7 @@ pre {
   tab-size: 3;
   border-radius: $border-radius;
   white-space: pre-wrap;
-  background: mix($light, #fff, 50%);
+  background: mix($light, #ffffff, 50%);
   -webkit-font-smoothing: auto;
 
   code {
@@ -131,7 +131,7 @@ img {
 Selection
  */
 ::selection {
-  color: #fff;
+  color: $white;
   background-color: lighten($primary, 8%);
 }
 
diff --git a/src/scss/ui/forms/_form-colorinput.scss b/src/scss/ui/forms/_form-colorinput.scss
index 304dc0d31..b2f39a911 100644
--- a/src/scss/ui/forms/_form-colorinput.scss
+++ b/src/scss/ui/forms/_form-colorinput.scss
@@ -19,7 +19,7 @@ Color Input
   display: block;
   width: 1.5rem;
   height: 1.5rem;
-  color: #fff;
+  color: $white;
   border: 1px solid $border-color-transparent;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
diff --git a/src/scss/ui/forms/_form-imagecheck.scss b/src/scss/ui/forms/_form-imagecheck.scss
index 1a9925d7e..da75ccffc 100644
--- a/src/scss/ui/forms/_form-imagecheck.scss
+++ b/src/scss/ui/forms/_form-imagecheck.scss
@@ -38,7 +38,7 @@ Image check
     display: block;
     width: $form-check-input-width;
     height: $form-check-input-width;
-    color: #fff;
+    color: $white;
     pointer-events: none;
     content: "";
     user-select: none;
diff --git a/src/scss/utils/_background.scss b/src/scss/utils/_background.scss
index c834fc6b4..cf75a3b59 100644
--- a/src/scss/utils/_background.scss
+++ b/src/scss/utils/_background.scss
@@ -1,10 +1,10 @@
 .bg-white-overlay {
-  color: #fff;
+  color: $white;
   background-color: $light-white;
 }
 
 .bg-dark-overlay {
-  color: #fff;
+  color: $white;
   background-color: $light-black;
 }
 
diff --git a/src/scss/vendor/_apexcharts.scss b/src/scss/vendor/_apexcharts.scss
index c72ccd3f5..cae870a76 100644
--- a/src/scss/vendor/_apexcharts.scss
+++ b/src/scss/vendor/_apexcharts.scss
@@ -15,7 +15,7 @@
 
 .apexcharts-tooltip {
   line-height: 1;
-  color: #fff;
+  color: $white;
   background: $dark !important;
   border: 0 !important;
   border-radius: 3px !important;
diff --git a/src/scss/vendor/_fullcalendar.scss b/src/scss/vendor/_fullcalendar.scss
index 4a975d2c3..3495ad7ea 100644
--- a/src/scss/vendor/_fullcalendar.scss
+++ b/src/scss/vendor/_fullcalendar.scss
@@ -21,7 +21,7 @@
   }
 
   .fc-button {
-    //@include button-variant(#ffffff, $border-color, $text-muted);
+    //@include button-variant($white, $border-color, $text-muted);
     //@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
     //@include transition($btn-transition);
   }