> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/embryo/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/embryo-angular/style-customization.md).

# Style Customization

 **Design style customization**

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

#### Theme Customization ( **By Changing Primary Vars as per Google Color P**alette)

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

 Open **assets>scss>material.theme** file

 Go to [Google Color palette](https://material.io/guidelines/style/color.html#color-color-palette)

```
// Define the default theme (same as the example above).
$my-theme-primary: mat-palette($mat-indigo,800);
$my-theme-accent:  mat-palette($mat-deep-orange, 500);
$my-light-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);
```

By default gene gives the following color set, you can change as per your requirement

![](/files/-LNt2e28z4RPzt9YcpM2)

 Simply choose the color you want from the pallete and replace that in the file for e.g. if you wish to change the primary color with Purple - 400 simply choose its hex value (#ab47bc) and replace in the file.

```
$my-theme-primary: mat-palette($mat-purple,400);
```

For more information please go to <https://material.angular.io/guide/theming>

#### Custom Variables

If you want to change variable of typography , page title and footer then go to the variables.scss file and change the vaulues.

```
//Main body 
$body-bg:#f3f3f4;
$grey-bg:#f3f3f4;


//Body color

$font-color: #3A405B;

//$border

$theme-border-color:#d5d5d5;

$html-font-size: 16px;
$mat-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;

//Heading Font Size 

$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 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);

$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;


//Page Title

$page-title-bg-image:url("../../assets/images/page-title-bar.jpg");
$page-title-padding:7rem 0;
$page-title-align:center;
$page-title-color:#fff;

//Header

$main-nav-color:#fff;


//Sub-menu

$sub-menu-bg:#fff;
$sub-menu-color:$font-color;

//Responsive Sidebar

$responsive-menu-color:#fff;
$responsive-sidebar-bg:url("../../assets/images/bg-sidebar.jpg");


//Slider images

$slider-1-img:url('../../assets/images/slider-1.jpg');
$slider-2-img:url('../../assets/images/slider-2.jpg');
$slider-3-img:url('../../assets/images/slider-3.jpg');

//Pre Loader
$loader-bg:#fff;
$loader-color:#283593;

//Footer

$footer-bg:#000000;
$footer-color:#ffffff;

//rating

$rating-selected-color:#EDB867;
$rating-unselected-color:#d2d2d2;

//card Shadow

$card-shadow:0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
```