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>

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>

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