Themes

Take full control of all the colors

White

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FEFEFE
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#E35A1C
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#0035DB
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme light"></div>

Dark transparent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
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 dark-transparent"></div>

Light blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#CCDEFF
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#001937
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#001937
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-blue"></div>

Light-3

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#001937
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(18.57, 87%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-light-3"></div>

Nordic Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#003EFF
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#CF521A
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#CCCCCC
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-nordic-blue"></div>

Dark Nordic Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#001937
Accent
#CCDEFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#DB571B
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(225.41, 100%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-dark-nordic-blue"></div>

Light gray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#F8F8F8
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#001937
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-gray"></div>

Light gray-2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#F8F8F8
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-gray-2"></div>

White and blue border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FEFEFE
Accent
#003EFF
Border
#003EFF
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme light-blue"></div>

Base
Foreground
#003EFF
Background
#FEFEFE
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(18.57, 87%, 40%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(225.41, 100%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme email-light"></div>

Base
Foreground
#003EFF
Background
#F8F8F8
Accent
#003EFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#F05F1E
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(18.57, 87%, 40%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003EFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(225.41, 100%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme email-theme-gray-2"></div>

purple-darkblue-background

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#001938
Background
#8E38F8
Accent
#BFA6F8
Border
transparent
Primary button
Foreground
#8E38F8
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#5F25A6
Background
#F0F0F0
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#F0F0F0
Background
transparent
Border
#F0F0F0
Focus outline
#CCCCCC
Link button
Link color
#D8BFF8
Link button hover
Link hover color
hsl(266.32, 80%, 85%)
Focus outline
#CCCCCC
Implementation
<div class="theme purple-darkblue-background"></div>

dwblue-darkblue-background

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#001938
Background
#0044FF
Accent
#6E90FF
Border
transparent
Primary button
Foreground
#0044FF
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#0032BA
Background
#F0F0F0
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#CCCCCC
Border
#FFFFFF
Secondary button hover
Foreground
#F0F0F0
Background
hsl(0, 0%, 85%)
Border
#F0F0F0
Focus outline
#CCCCCC
Link button
Link color
#6E90FF
Link button hover
Link hover color
hsl(225.93, 100%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme dwblue-darkblue-background"></div>

White dwpurple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
#B275F8
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#8E38F8
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#B275F8
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#F2F2F2
Background
transparent
Border
#F2F2F2
Focus outline
#CCCCCC
Link button
Link color
#8E38F8
Link button hover
Link hover color
hsl(266.88, 93%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme white-dwpurple"></div>

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