Style Customization

Embryo is developed with Scss and Vuetify so its easy to change the styling for your app. It uses some custom variables which provides you the more flexibility and control over design.

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)

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

Open src > constants > AppConfig.js file

Go to AppConfig.js​

AppConfig.js

// Define the theme color 

color: {
      primary: '#283593',                                           
      accent : '#ff5722',
   }
   

• ( By Changing Custom variables)

Open _variables.scss file under 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;