Style Customization

Embryo App is developed with Material UI so it's very easy to change the style.

Changing Default Variables

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

Change Theme Colors

Theme colors in the template is managed in two steps:

First you need to change the colour code in the src->themes->primaryTheme.js file to reflect the changes in the components of material-ui:

primaryTheme.js

/**
 * App Light Theme
 */
import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
   palette: {
      primary: {
         main: '#26348F' // Change this color code
      },
      secondary: {
         main: '#FF5722' // Change this color code 
      }
   }
});

export default theme;

Second you need to change the colour code in the _variables.scss file to reflect the changes in the whole theme:

_variables.scss

//Theme default colors:-
$primary: #26348F; //Manage Primary Color
$secondary:rgba(0, 0, 0, 0.54); //Manage text Color
​
$success: #28a745; //Manage Success Color
$danger:#DE3F3F; //Manage Danger Color
$warning:#ffc107; //Manage Warning Color
$info:#17a2b8; //Manage Info Color
​
$transparent:transparent;
$dark-grey:rgba(0, 0, 0, 0.7); //Manage text Color
$dark:rgba(0, 0, 0, 0.87); //Manage text Color
​
$active:#FF5722; //Manage secondary Color
$black:#000000;
$black-light:#212121;
​
$base:#fff;
$grey:#f3f3f4;
$border:#eceeef;

Change Font Family

To change app font-family go to variables.scss file and change following values.

_variables.scss

//font-family:-
 
$roboto:'Roboto', sans-serif;

Change Font Weight

_variables.scss

//font-weight:-
$font-weight-light:300 !default;
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 700 !default;
$font-weight-italic:italic;

Change Typography

_variables.scss

//body style:-
$body-bg:$grey;
$body-color:$dark;
$font-size-body:1rem !default;//16px
$line-height:1.5rem !default;//24px
​
//heading font sizes:-
$font-size-h1: 3.25rem !default;//52px
$font-size-h2: 2.813rem !default;//45px
$font-size-h3: 2.125rem !default;//34px
$font-size-h4: 1.5rem !default;//24px
$font-size-h5: 1.25rem !default;//20px
$font-size-h6: 1rem !default;//16px
​
//heading line-height :-
$line-height-h1:3.75rem !default;//60px
$line-height-h2:3rem !default;//48px
$line-height-h3:2.5rem !default;//40px
$line-height-h4:2rem !default;//32px
$line-height-h5:1.75rem !default;//28px
$line-height-h6:1.5rem !default;//24px
​
//heading font color:-
$h1-font-color:$dark !default;//black
$h2-font-color:$dark !default;//black
$h3-font-color:$dark !default;//black
$h4-font-color:$dark !default;//black
$h5-font-color:$dark !default;//black
$h6-font-color:$dark !default;//black
​
//paragraph :-
$font-size-p:0.875rem !default;//14px
$line-height-p:1.25rem !default;//20px
$font-color-p:$dark-grey;
​
//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);

Change PageTitle Style

_variables.scss

//Page Title
$page-title-bg-image:url("../../assets/images/page-title-bar.jpg");
$page-title-padding:7rem 0;
$page-title-color:$base;

Change spacers

_variables.scss

// Spacing
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge((
        0: 0,
        5: ($spacer * .3125),
        10: ($spacer * .625),
        15: ($spacer * .9375),
        20: ($spacer * 1.25),
        25: ($spacer * 1.5625),
        30: ($spacer * 1.875),
        40: ($spacer * 2.5),
        50: ($spacer * 3.125),
        60: ($spacer * 3.75)
  ),
        $spacers
);

Change Breakpoints

_variables.scss

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
​
$grid-breakpoints: (
        xs: 0,
        sm: 600px,
        md: 960px,
        lg: 1280px,
        xl: 1920px
) !default;