# Create your own custom theme

If you're not enough with default set of themes you can easily create the new one. To do that, all you need is to directly extend `AppTheme` object with new property which would be the title of new theme and add appropriate structure.

### Theme creation structure

First of all, from `@make-software/csprclick-ui` you need to import`clickStyleguide` object which consist all necessary colors constructors to cover you application with new theme. Also you'll need helper function to build your own theme `buildTheme`.

To create the new custom theme, please follow the signature:

**note: (instead of hardcoded hex, please use your own color values)**

```tsx
import { clickStyleguide, buildTheme } from '@make-software/csprclick-ui';

const newCustomTheme = {
        csprclickDarkTheme: {
            [clickStyleguide.backgroundTopBarColor]: '#6305a2',
            [clickStyleguide.backgroundMenuColor]: '#b6a3e5',
            [clickStyleguide.hoverProductMenu]: '#b193ec',
            [clickStyleguide.hoverAccountMenu]: '#b193ec',
            [clickStyleguide.textColor]: '#500383',
            [clickStyleguide.topBarTextColor]: '#9770ef',
            [clickStyleguide.menuIconAndLinkColor]: '#af05f3',
            [clickStyleguide.topBarIconHoverColor]: '#6a3be0',
        },
        csprclickLightTheme: {
            [clickStyleguide.backgroundTopBarColor]: '#9d13cb',
            [clickStyleguide.backgroundMenuColor]: '#a15fe0',
            [clickStyleguide.hoverProductMenu]: '#693388',
            [clickStyleguide.hoverAccountMenu]: '#693388',
            [clickStyleguide.textColor]: '#c9b6ea',
            [clickStyleguide.topBarTextColor]: '#d8cae8',
            [clickStyleguide.menuIconAndLinkColor]: '#ec06c5',
            [clickStyleguide.topBarIconHoverColor]: '#ec06c5',
        },
}
```

Then, you need to inject newly created theme object into `buildTheme` constructor function alongside with `appDarkTheme` and `appLightTheme` if needed.

```tsx
export const AppTheme = buildTheme({
    ...newCustomTheme,
    appDarkTheme: {
        topBarSectionBackgroundColor: newCustomTheme.csprclickDarkTheme[clickStyleguide.backgroundTopBarColor],
        [clickStyleguide.textColor]: '#DADCE5',
        bodyBackgroundColor: newCustomTheme.csprclickDarkTheme[clickStyleguide.backgroundTopBarColor],
    },
    appLightTheme: {
        topBarSectionBackgroundColor: newCustomTheme.csprclickLightTheme[clickStyleguide.backgroundTopBarColor],
        [clickStyleguide.textColor]: '#1A1919',
        bodyBackgroundColor: newCustomTheme.csprclickLightTheme[clickStyleguide.backgroundTopBarColor],
    },
});
```

### Colors matching examples

`clickStyleguide` has a set of colors. Each color from `clickStyleguide` has its own corresponding area of usage and responsibility.

Here you can find all matching with colors and its corresponding area of usage on `<ClickUI>` component

* `csprclickDarkTheme` - stands for customise `<ClickUI>` component and all child or relative components in Dark mode.
* `csprclickLightTheme` - stands for customise `<ClickUI>` component and all child or relative components in Light mode.

Each of above properties has the same set of colors:

* `[clickStyleguide.backgroundTopBarColor]: 'blue'` - stands for whole `<ClickUI>` background color

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-586c9b022fc95c22b233cc4c207faaa793f16b65%2Fclick-background.png?alt=media" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.backgroundMenuColor]: 'blue'` - stands for all dropdown backgrounds Applies for the following components: `<ProductMenu>`, `<AccountMenu>`, `<Currencies>`, `<Languages>`, `<Network>` and `<CustomSelect>` component.

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-30d7718c85a74060d245d220938805abb2de513c%2Fproduct-background.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-2bf58fa1408d2afac7d656b2582fc8f49f25cdb6%2Faccount-background.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-5b585202ab574cc9c3bbf81be90ccd62f013a13c%2Fcurrencies-background.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://github.com/make-software/casper-click-websdk/blob/documentation-v1.11/docs/public/.gitbook/assets/theme-customization/languages-background.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-21dca951a6075c215b96b12b5603f299ff6e1df9%2Fnetwork-background.png?alt=media" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.hoverProductMenu]: 'blue'` - stands for changing colour when hovering on items inside `<ProductMenu>`

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-7b768e6868cd38bd5b57d440416f2de6324355c4%2Fhover-product.png?alt=media" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.hoverAccountMenu]: 'blue'` - stands for changing colour when hovering on items inside `<AccountMenu>`, `<Currencies>`, `<Languages>`, `<Network>` and `<CustomSelect>` component.

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-505ceb3f2451f20023ff7c7a70f878f5b665b3da%2Fhover-account-menu.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-7a821d3dfc8a389da1b82b02aa25842238d66dad%2Fhover-languages.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://github.com/make-software/casper-click-websdk/blob/documentation-v1.11/docs/public/.gitbook/assets/theme-customization/hover-currencies.png.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://github.com/make-software/casper-click-websdk/blob/documentation-v1.11/docs/public/.gitbook/assets/theme-customization/hover-network.png.png" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.textColor]: 'blue'` - stands for text colour inside each dropdown which is under `<ClickUI>`

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-23915dcabf028addd8d35326c53e7a6c99f0558c%2Ftext-color-account.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-ca98738c3970ec0345dc3dd9c3903aa5c6b0736d%2Ftext-color-currencies.png?alt=media" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.topBarTextColor]: 'blue'` - stands for text colour specific for `<ClickUI` and `ClickModals` components

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-1c7160f378c234fdc601dc52d591b85ba593df92%2Ftopbar-text-color.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-4d9c6120f023fc6c375d888d7ab1e31cbcb28b92%2Fclick-modal-text-color.png?alt=media" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.topBarIconHoverColor]: 'blue'` - stands for changing colour when hovering on items which are on `<ClickUI>` component

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-129a782bddace452025edcdbad52b11634de7735%2Ftop-bar-icon-hover-color.png?alt=media" alt=""><figcaption></figcaption></figure>

* `[clickStyleguide.menuIconAndLinkColor]: 'blue'` - stands for links and icons colour

Example on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-a8bff3034a3b61d3dd38de40ba16786f85a4f406%2Fmenu-account-icon-links-color.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-e5d96eac9f849832d64ca56e1a455e8ae54d698e%2Flanguages-icon-links-color.png?alt=media" alt=""><figcaption></figcaption></figure>

It's really easy and fast to create you own color theme! Enjoy the process!