Style Customization

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.

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.

_bootstrap-override.scss

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

Change Text Colors

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

_bootstrap-override.scss

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

Heading

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

_bootstrap-override.scss

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

Main Container

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

_bootstrap.override.scss

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

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:

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:

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.

_bootstrap.override.scss

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

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.

_app-variables.scss

// 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

Sidebar Customization

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

_app-variables.scss

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

Content Block

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

_app.variables.scss

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

Header Styling

Customise your header styling with help of the following variables.

_app.variables.scss

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

Footer Styling

Customise your footer styling with help of the following variables.

_app.variables.scss

// Footer Variable

$footer-height:                   50px;
$footer-bg:                       $navbar-bg;
$footer-box-shadow:               none;

Changing Color Values For Charts And Map

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

chart-config.js

/**
* 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;

PreviousSelection Controls NextCreate a Docker Image

Last updated 5 years ago

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.

_bootstrap-override.scss

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

Change Text Colors

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

_bootstrap-override.scss

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

Heading

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

_bootstrap-override.scss

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

Main Container

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

_bootstrap.override.scss

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

Font Customizations

Adding a New Font Family

Google FontsGoogle Fonts

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:

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.

_bootstrap.override.scss

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

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

Gradient Colors

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

_app-variables.scss

// 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

Sidebar Customization

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

_app-variables.scss

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

Content Block

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

_app.variables.scss

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

Header Styling

Customise your header styling with help of the following variables.

_app.variables.scss

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

Footer Styling

Customise your footer styling with help of the following variables.

_app.variables.scss

// Footer Variable

$footer-height:                   50px;
$footer-bg:                       $navbar-bg;
$footer-box-shadow:               none;

Changing Color Values For Charts And Map

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

chart-config.js

/**
* 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;

PreviousSelection Controls NextCreate a Docker Image

Last updated 5 years ago