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.

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

@theme-brand-2

#20718e

14

@theme-brand-3

#003e67

14

@theme-brand-4

#081730

14

@theme-background-1

#798796

14

@theme-background-2

#b9c5d2

14

@theme-background-3

#dbe1e8

14

@theme-background-4

#f4f7f9

14

@theme-accent-1

#e7f8eb

14

@theme-accent-2

#45cd64

14

@theme-accent-3

#11892c

14

@theme-accent-4

#fcf3df

14

@theme-accent-5

#ecaf28

14

@theme-accent-6

#fae5e7

14

@theme-accent-7

#cf0015

14

Login page artwork

The Less 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