Style Customization

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;
Last Updated 5 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages