> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/define-a-theme.md).

# Define a Theme

This section explains how to define a theme in the library. We will take as an example defining a theme for the company "Acme". The procedure consists of 3 steps:

1. Defining the color palettes for the theme:
2. Defining the theme
3. Applying the theme in the application

## **Defining the color palettes for the theme:** <a href="#defining-the-color-palettes-for-the-theme" id="defining-the-color-palettes-for-the-theme"></a>

You can define any color with all the shades needed in SASS Angular Material 2. Example of defining a special red color palette for Acme in SASS in a file called "acme.palettes.scss":

```
$acme-lime: (
  50: #f9fbe7,
  100: #f0f4c3,
  200: #e6ee9c,
  300: #dce775,
  400: #d4e157,
  500: #cddc39,
  600: #c0ca33,
  700: #afb42b,
  800: #9e9d24,
  900: #827717,
  A100: #f4ff81,
  A200: #eeff41,
  A400: #c6ff00,
  A700: #aeea00,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: $black-87-opacity,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);
```

Design all your needed palettes in this file and then move to the next step.

## Defining the Theme: <a href="#defining-the-theme" id="defining-the-theme"></a>

After defining all the colors needed in the shown fashion, the next step is to define the global theme for Acme by following the next steps:

1. Create a file called "name.theme.scss"
2. Import the palettes file you defined in the previous step using "@import 'path/to/file".
3. Follow the below syntax to create your customized theme.

Example of defining a theme for Acme in SASS:

```
@import '~@angular/material/core/theming/all-theme';
@include mat-core();

@import 'path/to/acme.palettes'; /* Notice importing the palettes */

.acme-theme {
    $primary: mat-palette($acme-lime);
    $accent: mat-palette($acme-amber, A200, A100, A400);
    $warn: mat-palette($acme-deep-orange);
    $theme: mat-light-theme($primary, $accent, $warn);
    @include angular-material-theme($theme);
}
```

## Applying the theme in the Application: <a href="#applying-the-theme-in-the-application" id="applying-the-theme-in-the-application"></a>

To apply the new theme on the application level, you can either set the new theme as a global theme in the styles.scss file where all the components will adopt that theme:

```
@import 'path/to/acme.theme.scss';
```

or import the customized theme file into your components scss file and add the name of the theme to the class property of your component. For example, applying the Acme theme to a button component:

```
<button md-button class="acme-theme" color="primary" (click)="function()"></button>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://cedrus.gitbook.io/project-fusion/define-a-theme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.