Design style customization‌

Embryo is made in material design and designed with scss so its easy to customize the color and other style related points.‌

Theme Customization

By Changing Primary Accent colors in Constant file

Open src > constants > AppConfig.js file‌

If you wish to change the primary colors then you can do the following:‌

Go to AppConfig.js​

// Define the theme color 
 color: {
    primary: '#283593',                                           
    accent : '#ff5722',
 }

By Changing Custom variables

Open _variables.scss file under src > assets > scss folder and change style variable values as per your requirement.

//theme color
$primary:#283593;
$accent: #FF5722; 
$carbon: #000;            
$base:#FFF;                 

//font color
$font-color:#3A405B;      
 
//body background
$body-bg:#f3f3f3;
 
//font family 
$font-family-base:'Roboto', sans-serif;
 
// Setting for the Typograpgy elements.
$html-font-size: 16px;
$base-font-family: 'Roboto', sans-serif;
$font-size-base: 0.875rem !default;
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;
 
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium:500;
$font-weight-bold:700;
 
// Setting For Heading Element
$h1-font-size: 3.25rem !default;//52px
$h2-font-size: 2.813rem !default;//45px
$h3-font-size: 2.125rem !default;//34px
$h4-font-size: 1.5rem !default;//24px
$h5-font-size: 1.25rem !default;//20px
$h6-font-size: 1rem !default;//16px
 
$headings-margin-bottom: (1rem / 2) !default;
$headings-font-family:inherit !default;
$headings-font-weight:500 !default;
$headings-line-height:1.1 !default;
$headings-color:inherit !default;
 
//Font Color 
$h1-font-color:rgba(0,0,0,0.87);
$h2-font-color:rgba(0,0,0,0.87);
$h3-font-color:rgba(0,0,0,0.87);
$h4-font-color:rgba(0,0,0,0.87);
$h5-font-color:rgba(0,0,0,0.87);
$h6-font-color:rgba(0,0,0,0.87);
 
//box-shadow 
$box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
 
//Page Title
$page-title-bg-image:url("/static/images/page-title-bar.jpg");
$page-title-padding:7rem 0;
$page-title-align:center;
$page-title-color:$base;
 
//Sub-menu
$sub-menu-bg:$base;
$sub-menu-color:$font-color;
 
//Responsive Sidebar
$responsive-menu-color:$base;
$responsive-sidebar-bg:url("/static/images/bg-sidebar.jpg");
 
//Pre Loader
$loader-bg:$base;
$loader-color:$primary;
 
//Footer
$footer-bg:$carbon;
$footer-color:$base;
 
//rating
$rating-selected-color:#EDB867;
$rating-unselected-color:#d2d2d2;