Theme Style
Go to sass>materizlize>components>
and open variables.scss file. Edit your variables with your requirement.
Custom Variables
In app.variables you will find the following variables. By using these variables you can customize the style of the theme.app.variables.scss
//Main
$main-container-bg:#f4f7fa;
$main-container-gap:1.5rem;
$transition-time:0.2s;
//sidebar
$sidebar-width:250px;
$sidebar-bg-color: #2e3344;
$sidbar-menu-color: #fff;
$sidebar-menu-active-hover-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.09);
$sidebar-menu-active-hover-bg: rgba(0, 0, 0, 0.2);
$sidebar-user-dropdown-color:#000;
$compact-sidebar-width:65px;
//app-card
$card-title-color:#464d69;
$card-title-font-size:1rem;
$card-title-font-weight:700;
$card-preloader-bg-color: #ffffff;
$card-dropdown-bg:#ffffff;
$card-dropdown-box-shadow:0 5px 5px -3px rgba(0, 0, 0, .2),
0 8px 10px 1px rgba(0, 0, 0, .14),
0 3px 14px 2px rgba(0, 0, 0, .12);
//Header
$app-toolbar-bg-color:#fff;
$app-toolbar-left-right-gap:$main-container-gap;
$app-toolbar-nav-color:#727891;
$app-toolbar-dropdown-shadow:0 3px 2px 0 rgba(0, 0, 0, .02);
$app-toolbar-dropdown-width:320px;
$app-toolbar-dropdown-color:#727891;
$app-toolbar-serach-active-bg:#f2f2f2;
$site-logo-border:rgba(255, 255, 2555, 0.3);
//Box Shadow
$mat-box-shadow:0 1px 15px 1px rgba(69, 65, 78, .08);
//BreadCrumb
$breadcrumb-bg-color:#fff;
$breadcrumb-font-size:1.4rem;
$breadcrumb-font-weight:600;
$breadcrumb-font-color:#464d69;