> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/embryo-vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/embryo-vue/style-customization.md).

# 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  <a href="#theme-customization-by-changing-primary-vars-as-per-google-color-palette" id="theme-customization-by-changing-primary-vars-as-per-google-color-palette"></a>

* **( By Changing  Primary Accent colors in Constant file)**

&#x20;If you wish to change the primary colours then you can do the following:

&#x20;Open **src > constants > AppConfig.js** file

&#x20;Go to AppConfig.js​

{% code title="AppConfig.js" %}

```javascript
// Define the theme color 

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

{% endcode %}

* **( 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;
```