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
assets / 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.
assets / 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;
assets / 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;
assets / 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.