# Theme settings

This page describes the configuration settings for Caplin FX Corporate’s colour scheme and login screen graphics.

## Configuration location

To customise the colour scheme, edit the variable definitions in the file `src/customers/__customer_name__/style.less`.

**📌 NOTE**\
Variable definitions in the file `src/customers/__customer_name__/style.less` override the default colour scheme defined in `src/style/variables.less`.

## Colour palette

The [Less](https://lesscss.org/) variables that define FX Corporate’s colour palette are described below using the default Caplin scheme as an example.

**Default Caplin colour scheme**

| Less variable | Value | Colour |
| --- | --- | :-: |
| @theme-brand-1 | #2b92b6 | ![14](../images/swatch-caplin-2b92b6.png) |
| @theme-brand-2 | #20718e | ![14](../images/swatch-caplin-20718e.png) |
| @theme-brand-3 | #003e67 | ![14](../images/swatch-caplin-003e67.png) |
| @theme-brand-4 | #081730 | ![14](../images/swatch-caplin-081730.png) |
| @theme-background-1 | #798796 | ![14](../images/swatch-caplin-798796.png) |
| @theme-background-2 | #b9c5d2 | ![14](../images/swatch-caplin-b9c5d2.png) |
| @theme-background-3 | #dbe1e8 | ![14](../images/swatch-caplin-dbe1e8.png) |
| @theme-background-4 | #f4f7f9 | ![14](../images/swatch-caplin-f4f7f9.png) |
| @theme-accent-1 | #e7f8eb | ![14](../images/swatch-caplin-e7f8eb.png) |
| @theme-accent-2 | #45cd64 | ![14](../images/swatch-caplin-45cd64.png) |
| @theme-accent-3 | #11892c | ![14](../images/swatch-caplin-11892c.png) |
| @theme-accent-4 | #fcf3df | ![14](../images/swatch-caplin-fcf3df.png) |
| @theme-accent-5 | #ecaf28 | ![14](../images/swatch-caplin-ecaf28.png) |
| @theme-accent-6 | #fae5e7 | ![14](../images/swatch-caplin-fae5e7.png) |
| @theme-accent-7 | #cf0015 | ![14](../images/swatch-caplin-cf0015.png) |

## Login page artwork

The [Less](https://lesscss.org/) variables that define the look and feel of FX Corporate’s login page are described below using the default Caplin scheme as an example.

**Default Caplin login screen**

| Less variable | Value | Description |
| --- | --- | --- |
| @theme-login-bg | url("./login_screen_bg.jpg") center center / cover no-repeat | The background image of the login page |
| @theme-login-product-logo | url("./login_screen_product_logo.svg") transparent center center / contain no-repeat | The product logo on the login page |
| @theme-login-company-logo | url("./login_screen_company_logo.svg") top left / 80px 12px no-repeat | The company logo on the login page |