# Style Customization

### **Design style customization** <a href="#design-style-customization" id="design-style-customization"></a>

Kava is developed with [Bootstrap 4](https://v4-alpha.getbootstrap.com/getting-started/introduction/) so its easy to change the styling for your app. It uses bootstrap variables along with some custom variables which provides you the more flexibility and control over design.

#### **Changing Default Variables** <a href="#changing-default-variables" id="changing-default-variables"></a>

Open `_bootstrap-override.scss` file under  `src/assets/scss/theme` folder and change style variable values as per your requirement.

#### **Change Theme Colors** <a href="#change-theme-colors" id="change-theme-colors"></a>

In \_bootstrap-overide.scss file find the following variables and Start with assigning color names to specific hex values.

```
$blue:    #4253FF !default;
$indigo:  #6610f2 !default;
$purple:  #7800E0 !default;
$pink:    #6D0303 !default;
$red:     #F41243 !default;
$orange:  #FF4646 !default;
$yellow:  #FF9B0B !default;
$green:   #10CC2F !default;
$teal:    #D9F762 !default;
$cyan:    #17a2b8 !default;
```

You can change the font size , text color and other various elements variables as per as your requirements.

### Custom Variables

According to the kava design we made some own variable to give full control over this template.&#x20;

Open `_custom-variables.scss` file under  `src/assets/scss/theme and change the variable.`

```
/*--------------
2.0 Custom Variables
----------------*/


/*=============|Custom Colors|===============*/

$purple-400:#602DAC;
$primary-gradient: linear-gradient($purple 0%, $purple-400 100%);
$secondary-gradient: linear-gradient(0deg, $orange 0%, $yellow 100%);
$success-gradient: linear-gradient($green 0%, $teal 100%);
$error-gradient: linear-gradient($pink 0%, $red 100%);

/*=======|SVG Colors|==========*/

$border-svg-1:#badaff ;
$border-svg-2:#FFF3E6 ;
$border-svg-3:#F4F4F4 ;
$svg-gray:#FBFBFB ;
$svg-service-grid: #f0e9fa;
$svg-service-grid2: rgba(theme-color(dark),0.18);

/*=========Slick  Color========*/ 

$slick-arrow-color:#D7D9DD;
$slick-dots-def: #DDDDDD;

/*==========Conatct Sec Font=========*/

$contact-font-color:#4C4F55;

/*===========Footer Section===========*/

$bg-primary-after-color:rgba(theme-color("primary"), .7);
$footer-social-icon: $dark ;
$footer-menu-list:#787D8A;

/*Secondary Font family*/

$sec-font-family:Muli;
$font-montserrat:Montserrat;

/*=============|Theme variables|============*/

$theme-box-shadow: 0 20px 50px 0 rgba($dark,0.07);
$theme-transition: all 0.3s ease;
$grid-item-space: 1.875rem;

/*==============|Margin and Padding Custom variables|==============*/ 

$mp-value-1:0.75rem !important;
$mp-value-2:2rem !important;

/*===============|Pages Banners Common Properties|===============*/

$banner-height: 400px;

/*===============|About Page Varibale|===============*/

$brands-image-height:800px;

/**===============|Service Items |====================*/

$service-item-text:#EFEFEF;

/**===============|Header Menu |====================*/

$submenu-bg:$white;
$submenu-color:$body-color;
$submenu-box-shadow:0 20px 50px 0 rgba($primary,0.076);

/**===============|Banner Overlay Color|====================*/

// $banner-overlay-color:linear-gradient(180deg, rgba($purple, 0.555) 0%, rgba(#7212f4, 0.733) 100%);
$banner-overlay-color:linear-gradient(180deg, rgba($purple, 0.755) 0%, rgba(#7212f4, 0.33) 100%);
```