Customizing colors in your project

This section details how you could customize color variables for your project.

There are following type of color variables you can change for your project:

  • BootStrap Base Colors

  • Custom Colors

BootStrap Base Colors

src / scss / layouts / {layout} / themes / {theme} / _variables.scss
$app-primary: #512DA8 !default;
$app-secondary: #FF4081 !default;
$primary: $app-primary;
$secondary: $app-secondary;
$success: #52c41a;
$info: #1890ff;
$warning: #fa8c16;
$danger: #f44336;
$light: #e5e5e5;
$dark: #212121;


$app-primary and $app-secondary are custom Drift colors which gives you an option to extend the primary and secondary colors of the theme in your own custom theme file.

Custom Colors

src / scss / layouts / {layout} / themes / {theme} / _variables.scss
$text-color: #757575 !default;
$text-color-dark: #212121 !default;
$primary-light: lighten($primary, 40%) !default;
$light-green: #1dce8e !default;
$dark-green: #3d6003 !default;
$light-blue: #5797fc !default;
$light-cyan: #00bcd4 !default;
$dark-blue: #0060ca !default;
$sky-blue: #00aeef !default;
$light-pink: #ff415a !default;
$brown: #5e1e21 !default;
$light-brown: #b23737 !default;
$light-teal: #1b8abe !default;

Typography Colors

src / scss / layouts / {layout} / themes / {theme} / _variables.scss
//$body-bg: $white !default;
$body-color: $text-color;

$link-color: theme-color("primary");
$link-hover-color: darken($link-color, 10%);

$headings-color: $text-color-dark;

Other Misc Colors

src / scss / layouts / {layout} / themes / {theme} / _variables.scss
$border-color: #ddd;

/* header colors */
$header-bg: $primary !default;
$header-color: rgba($white, 0.75) !default;
$header-color-hover: rgba($white, 1) !default;
$dt-brand-bg: $header-bg !default;
$dt-brand-color: $header-color !default;

/* sidebar colors */
$sidebar-bg: #110a21 !default;
$sidebar-color: #d1c4e9 !default;
$sidebar-color-hover: $secondary !default;
$sidebar-active-bg: #1e1532 !default;
$sidebar-active-color: $sidebar-color-hover !default;
$sidebar-submenu-color: $sidebar-color !default;
$sidebar-header-color: $text-color !default;
$sidebar-separator: #383245 !default;

/* footer colors */
$footer-bg: $gray-100 !default;
$footer-color: $text-color !default;

/* custom drawer colors */
$dt-drawer-bg: $white !default;
$dt-backdrop-bg: rgba($black, 0.4) !default;

/* colors for sidebar in apps */
$module-sidebar-bg: $white !default;
$module-sidebar-color: $text-color-dark !default;
$module-sidebar-color-hover: $secondary !default;

There are many other color variables which you can find in the same file. You can customize those as per your need.

Last updated