---
description: >-
  Reactify App is developed with Reactstrap, Bootstrap & Material UI. So It's
  very easy to change the style. It uses some custom variables which provide you
  the more flexibility and control over design.
---

# Style Customization

## **Changing Default Variables:**

Open  `src->assests->scss->_bootstrap-override.scss` file and change style variable values as per your requirement.

### **Change Theme Colors**

You can change the theme colors using the given style variables.

{% code title="_bootstrap-override.scss" %}
```css
//App Background Scale

$blue:             #5C6AC4 !default; //Manage Primary Color
$cyan:             #47C1BF !default; //Manage Info Color
$green:            #50B83C !default; //Manage Success Color
$yellow:           #F49342 !default; //Manage Warning Color
$red:              #DE3618 !default; //Manage Danger Color

$indigo:           #174176 !default;
$teal:             #007ACE !default; // Manage Secondary Color

$purple:           #6f42c1 !default;
$pink:             #FF2B72 !default;
$orange:           #EEC200 !default;
```
{% endcode %}

### **Change Text Colors**

You can change the text colors using the given style variables.

{% code title="_bootstrap-override.scss" %}
```css
// App Text Scale

$white:                          #fff    !default;
$gray-100:                       #F4F6F8 !default;
$gray-200:                       #ECEDEF !default;
$gray-300:                       #DBDBDB !default;
$gray-400:                       #C6C9CF !default;
$gray-500:                       #919EAB !default;
$gray-600:                       #657786 !default;
$gray-700:                       #454F5B !default;
$gray-800:                       #393C40 !default;
$gray-900:                       #14171A !default;
$black:                          #000    !default;
```
{% endcode %}

### **Heading**

With help of following variables you can easily change font sizes for all headings ( h1 to h6).

{% code title="_bootstrap-override.scss" %}
```css
// Setting For Heading Element

$h1-font-size:                    2.25rem  !default; //36px
$h2-font-size:                    1.875rem !default; //30px
$h3-font-size:                    1.5rem   !default; //24px
$h4-font-size:                    1.125rem !default; //18px
$h5-font-size:                    1rem     !default; //16px
$h6-font-size:                    0.875rem !default; //14px

$headings-margin-bottom:          ($spacer / 2) !default;
$headings-font-family:            inherit !default;
$headings-font-weight:            400 !default;
$headings-line-height:            1.2 !default;
$headings-color:                  inherit !default;
```
{% endcode %}

### **Main Container**

To change app background color go to `_bootstrap.override.scss` file and change following values.

{% code title="_bootstrap.override.scss" %}
```css
// Settings for the  <body>  element.
$body-bg:                         $gray-100 !default;
$body-color:                      $gray-700 !default;

// stylelint-disable value-keyword-case
$font-family-sans-serif:                         'Heebo', sans-serif !default;
$font-family-monospace:                          SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:                               $font-family-sans-serif !default;
```
{% endcode %}

### **Font Customizations**

#### **Adding a New Font Family**

If you want to change the existing font of the template, you can easily change them. We are using Google Fonts in the template as it is free to use and is easily available. For more info, please visit:

{% embed url="https://fonts.google.com/" %}

**Step 1:** To change the font family in the template, please visit the above link and select the font you wish to apply to your template and copy the embed code & font family. Example:

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_WapcXgjVWT3-lw0ZQ%2F-L_Wk41OL1Sp40B42VuA%2FScreenshot%202019-03-09%20at%202.47.16%20PM.png?alt=media\&token=ab44a05d-ac7b-41bf-b365-dfbe54e9a9ae)

Paste the embed code in `index.html` file under the `public` folder.

Make sure to copy the embed code in the `head` tag of the `index.html` file.

**Step 2:** Now open the `_bootstrap.override.scss` file and paste the font family in the variable `$font-family-base` like:

```
$font-family-sans-serif: 'Heebo', sans-serif;
```

#### Customizing the existing font

This all you need to use a new font in the template.

If you want to make the customizations in the existing font then you can change the variables defined below:

Change the font family and font size in `_app.variables.scss` file.

{% code title="_bootstrap.override.scss" %}
```css
// stylelint-enable value-keyword-case_app.variables.scss

$font-size-base:                  1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                    ($font-size-base * 1.25) !default;
$font-size-sm:                    ($font-size-base * .875) !default;

$font-weight-light:               300 !default;
$font-weight-normal:              400 !default;
$font-weight-bold:                700 !default;

$font-weight-base:                $font-weight-normal !default;
$line-height-base:                1.5 !default;
```
{% endcode %}

All the above customizations like Theme color, Text color & Heading are done in the same file i.e. `_bootstrap-override.scss`

For other customizations like Gradient color, side bar, content block, header styling, main container & fonts can be done in `_app-variables.scss` file under the same directory i.e. `src->assets->scss`.

### **Gradient Colors**

If you want to use gradient colors then use these variables with basic values.

{% code title="_app-variables.scss" %}
```css
// Gradient Theme Color

$sidebar-dark-gradient:            linear-gradient(0deg, #464D69 0%, rgba(70, 77, 105, 1) 100%);
$sidebar-dark:                     #2E3344;
$overlay-light:                    rgb(255,255,255);
$gradient-primary:                 linear-gradient(180deg, #5D92F4 0%, #09203F 100%); // Primary
$gradient-purple:                  linear-gradient(0deg, #F53844 0%, #42378F 100%); // Purple
$gradient-success:                 linear-gradient(180deg, #00D0BD 0%, #007ADF 100%); // Success
$gradient-warning:                 linear-gradient(0deg, #B02E0C 0%, #FFB70F 100%); // warning
$gradient-danger:                  linear-gradient(0deg, #B02E0C 0%, #FFB70F 100%);// danger
```
{% endcode %}

### **Sidebar Customization**

You can change all properties of the sidebar from the given variables.

{% code title="_app-variables.scss" %}
```css
// Sidebar Variable

$sidebar-width:                   16.25rem; //280px;
$sidebar-box-shadow:              none;

$sidebar-link-fontsize:           1rem; //14px
$sidebar-link-font-weight:        400;
$sidebar-link-font-color:         $gray-900;
$sidebar-link-transform:          capitalize;
$sidebar-link-spacing:            0.9375rem 2rem; //15px 40px;

$sidebar-icon-font-size:          1rem; //14px;

$sidebar-hover-bg:                rgba(0,0,0,0.22);
$sidebar-hover-color:             $white;

$sidebar-submenu-font-size:       1rem; //14px
$sidebar-submenu-font-color:      $gray-900;
$sidebar-submenu-spacing:         0.9375rem 2.5rem 0.9375rem 4.375rem;

// Mini Sidebar Variable

$mini-sidebar-width:              85px;
```
{% endcode %}

### **Content Block**

Customise your main block settings with help of the following variables.

{% code title="_app.variables.scss" %}
```css
// Block Settings

$block-bg:                       $white;
$block-border-radius:            5px;
$block-border:                   none;
$block-spacing:                  1.25rem 1.25rem; //20px 20px;
$block-shadow:                   0 1px 15px 1px rgba(69,65,78,0.08);
$block-hover-shadow:             0 1px 15px 1px rgba(69,65,78,0.08);
$block-margin-bottom:            $grid-gutter-width; //24px
$block-transition:               all 0.4s ease-in-out 0s;

$block-title-color:              $gray-900;
$block-title-spacing:            0.9375rem 1.25rem; //15px 20px;
$block-title-font-size:          1rem; //16px
$block-title-font-weight:        500;
$block-title-transform:          capitalize;

$block-contextual-color:         $gray-600;
$block-contextual-font-size:     1rem;

$block-footer-border-width:      1px;
$block-footer-border-color:      $gray-300;
```
{% endcode %}

### **Header Styling**

Customise your header styling with help of the following variables.

{% code title="_app.variables.scss" %}
```css
// Navbar Varibale

$navbar-height:                   4rem; //80px;
$navbar-bg:                       $white;
$hamburger-icon-color:            $gray-600;
$navbar-icon-height:              35px;
$navbar-icon-width:               35px;
$navbar-link-color:               $white;
```
{% endcode %}

### **Footer Styling**

Customise your footer styling with help of the following variables.

{% code title="_app.variables.scss" %}
```css
// Footer Variable

$footer-height:                   50px;
$footer-bg:                       $navbar-bg;
$footer-box-shadow:               none;
```
{% endcode %}

### **Changing Color Values For Charts And Map**

You can change the color of charts and maps from the `src->constants->chart-config.js` file.

{% code title="chart-config.js" %}
```javascript
/**
* Change all chart colors
*/
import AppConfig from './AppConfig';

const { primary, info, danger, success, warning, purple, secondary, yellow, white, greyLighten, grey } = AppConfig.themeColors;

const ChartConfig = {
  color: {
    'primary': primary,
    'info': info,
    'warning': warning,
    'danger': danger,
    'success': success,
    'default': '#DEE4E8',
    'purple': purple,
    'secondary': secondary,
    'yellow': yellow,
    'white': '#FFFFFF',
    'dark': white,
    'greyLighten': greyLighten,
    'grey': grey
  },
  legendFontColor: '#AAAEB3', // only works on react chart js 2
  chartGridColor: '#EAEAEA',
  axesColor: '#657786',
  shadowColor: 'rgba(0,0,0,0.6)'
}

// Tooltip Styles
export const tooltipStyle = {
  backgroundColor: 'rgba(0,0,0,0.6)',
  border: '1px solid rgba(0,0,0,0.6)',
  borderRadius: '5px'
}

export const tooltipTextStyle = {
  color: '#FFF',
  fontSize: '12px',
  paddingTop: '5px',
  paddingBottom: '5px',
  lineHeight: '1'
}

export default ChartConfig;
```
{% endcode %}
