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