# 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);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://iron-network.gitbook.io/embryo/embryo-angular/style-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.