Themes

Take full control of all the colors

Light

This is the body text of the theme.

Base
Foreground
#262626
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
#262626
Primary button hover
Foreground
#262626
Background
#FFFFFF
Border
#B3B3B3
Secondary button
Foreground
#1E1A33
Background
#FFFFFF
Border
#262626
Secondary button hover
Foreground
#1E1A33
Background
hsl(0, 0%, 85%)
Border
#262626
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light"></div>

Dark

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#333333
Accent
currentColor
Border
transparent
Primary button
Foreground
#333333
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#333333
Border
#333333
Secondary button
Foreground
#FFFFFF
Background
#333333
Border
#FFFFFF
Secondary button hover
Foreground
#333333
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark"></div>

Light transparent

This is the body text of the theme.

Base
Foreground
#262626
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
currentColor
Background
transparent
Border
transparent
Primary button hover
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
currentColor
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparent"></div>

Dark transparent

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
transparent
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-transparent"></div>

Light blue

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#689CCF
Accent
currentColor
Border
transparent
Primary button
Foreground
#689CCF
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#689CCF
Background
hsl(0, 0%, 85%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#689CCF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(209.71, 52%, 40%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-blue"></div>

Gray border

This is the body text of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
currentColor
Border
#EBEBEB
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray-border"></div>

ES Dark blue

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#2369AF
Accent
currentColor
Border
transparent
Primary button
Foreground
#2369AF
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#2369AF
Border
#2369AF
Secondary button
Foreground
#FFFFFF
Background
#2369AF
Border
#FFFFFF
Secondary button hover
Foreground
#2369AF
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-blue"></div>

ES Dark Grey

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#555555
Accent
currentColor
Border
transparent
Primary button
Foreground
#555555
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#555555
Background
hsl(0, 0%, 85%)
Border
#FFFFFF
Secondary button
Foreground
#FFFFFF
Background
#555555
Border
#FFFFFF
Secondary button hover
Foreground
#555555
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-dark-grey"></div>

Light gray2

This is the body text of the theme.

Base
Foreground
#333333
Background
#CCCCCC
Accent
currentColor
Border
transparent
Primary button
Foreground
#CCCCCC
Background
#333333
Border
transparent
Primary button hover
Foreground
#CCCCCC
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray2"></div>

Light green

This is the body text of the theme.

Base
Foreground
#262626
Background
#F1F7F0
Accent
currentColor
Border
transparent
Primary button
Foreground
#F1F7F0
Background
#262626
Border
transparent
Primary button hover
Foreground
#F1F7F0
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#262626
Background
#F1F7F0
Border
transparent
Secondary button hover
Foreground
#262626
Background
hsl(111.43, 30%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-green"></div>

Dark green

This is the body text of the theme.

Base
Foreground
#262626
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#517C4C
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(113.75, 24%, 40%)
Border
transparent
Secondary button
Foreground
#517C4C
Background
transparent
Border
#517C4C
Secondary button hover
Foreground
#517C4C
Background
transparent
Border
#517C4C
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-darkgreen"></div>

Light transparent blue

This is the body text of the theme.

Base
Foreground
#2369AF
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#2369AF
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(210, 67%, 40%)
Border
transparent
Secondary button
Foreground
#2369AF
Background
transparent
Border
transparent
Secondary button hover
Foreground
#2369AF
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentblue"></div>

Light gray3

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#CCCCCC
Accent
currentColor
Border
transparent
Primary button
Foreground
#CCCCCC
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#CCCCCC
Background
hsl(0, 0%, 85%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray3"></div>

ES Dark green

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#19B47E
Accent
currentColor
Border
transparent
Primary button
Foreground
#19B47E
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#19B47E
Border
#19B47E
Secondary button
Foreground
#FFFFFF
Background
#19B47E
Border
#FFFFFF
Secondary button hover
Foreground
#19B47E
Background
#FFFFFF
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-green"></div>

ES Grey border

This is the body text of the theme.

Base
Foreground
#333333
Background
#F8F8F8
Accent
currentColor
Border
#EBEBEB
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-grey-border"></div>

ES Very Light Grey

This is the body text of the theme.

Base
Foreground
#333333
Background
#F4F4F4
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-very-light-grey"></div>

Light transparent green

This is the body text of the theme.

Base
Foreground
#19B47E
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#19B47E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(159.1, 76%, 40%)
Border
transparent
Secondary button
Foreground
#19B47E
Background
transparent
Border
transparent
Secondary button hover
Foreground
#19B47E
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentgreen"></div>

Light transparent light blue

This is the body text of the theme.

Base
Foreground
#689CCF
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#689CCF
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(209.71, 52%, 40%)
Border
transparent
Secondary button
Foreground
#689CCF
Background
transparent
Border
transparent
Secondary button hover
Foreground
#689CCF
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentlightblue"></div>

Light transparent black

This is the body text of the theme.

Base
Foreground
#333333
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
transparent
Border
transparent
Secondary button hover
Foreground
#333333
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentblack"></div>

Light transparent dark green

This is the body text of the theme.

Base
Foreground
#517C4C
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#517C4C
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(113.75, 24%, 40%)
Border
transparent
Secondary button
Foreground
#517C4C
Background
transparent
Border
transparent
Secondary button hover
Foreground
#517C4C
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentdarkgreen"></div>

Light transparent green border

This is the body text of the theme.

Base
Foreground
#19B47E
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#19B47E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(159.1, 76%, 40%)
Border
transparent
Secondary button
Foreground
#19B47E
Background
transparent
Border
#19B47E
Secondary button hover
Foreground
#19B47E
Background
transparent
Border
#19B47E
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentgreenborder"></div>

ES Very Light Grey border

This is the body text of the theme.

Base
Foreground
#333333
Background
#F4F4F4
Accent
currentColor
Border
#EBEBEB
Primary button
Foreground
#FFFFFF
Background
#333333
Border
#EBEBEB
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
#EBEBEB
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-very-light-grey-border"></div>

Partner Portal Orange

This is the body text of the theme.

Base
Foreground
#FFA523
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFA523
Background
#262626
Border
transparent
Primary button hover
Foreground
#FFA523
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#262626
Background
#FFA523
Border
transparent
Secondary button hover
Foreground
#262626
Background
hsl(35.45, 100%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-orange"></div>

Light transparent grey

This is the body text of the theme.

Base
Foreground
#555555
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#555555
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#555555
Background
transparent
Border
transparent
Secondary button hover
Foreground
#555555
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentgrey"></div>

Light transparent purple

This is the body text of the theme.

Base
Foreground
#3C175C
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#3C175C
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(272.17, 60%, 40%)
Border
transparent
Secondary button
Foreground
#3C175C
Background
transparent
Border
transparent
Secondary button hover
Foreground
#3C175C
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-transparentpurple"></div>

ES Very Light blue

This is the body text of the theme.

Base
Foreground
#333333
Background
#E1EBF5
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#E1EBF5
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(210, 50%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-very-light-blue"></div>

ES Very Light green

This is the body text of the theme.

Base
Foreground
#333333
Background
#E8F8F2
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#E8F8F2
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(157.5, 53%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-very-light-green"></div>

ES Very Light purple

This is the body text of the theme.

Base
Foreground
#333333
Background
#ECE8EF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#ECE8EF
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(274.29, 18%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-very-light-purple"></div>

ES Very Light darkblue

This is the body text of the theme.

Base
Foreground
#333333
Background
#D3E1EF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#D3E1EF
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(210, 47%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-very-light-darkblue"></div>

ES Blue border

This is the body text of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
currentColor
Border
#2369AF
Primary button
Foreground
#FFFFFF
Background
#333333
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#2369AF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(210, 67%, 40%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-blue-border"></div>

Light Transparent

This is the body text of the theme.

Base
Foreground
#262626
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
#262626
Primary button hover
Foreground
#262626
Background
#FFFFFF
Border
#B3B3B3
Secondary button
Foreground
#1E1A33
Background
transparent
Border
#262626
Secondary button hover
Foreground
#1E1A33
Background
transparent
Border
#262626
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-trans"></div>

Partner Portal Gold Navigation

This is the body text of the theme.

Base
Foreground
#FFA523
Background
#FFF0DB
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFA523
Background
#262626
Border
transparent
Primary button hover
Foreground
#FFA523
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#262626
Background
#FFA523
Border
transparent
Secondary button hover
Foreground
#262626
Background
hsl(35.45, 100%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gold"></div>

Light green Partner Portal

This is the body text of the theme.

Base
Foreground
#19B47E
Background
#FFFFFF
Accent
currentColor
Border
#CCCCCC
Primary button
Foreground
#FFFFFF
Background
#19B47E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(159.1, 76%, 40%)
Border
transparent
Secondary button
Foreground
#19B47E
Background
transparent
Border
transparent
Secondary button hover
Foreground
#19B47E
Background
transparent
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-greenpartnerportal"></div>

By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Functionality, Statistics and Marketing