Themes

Take full control of all the colors

No theme

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
currentColor
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 theme-notheme"></div>

Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#262626
Background
#FFFFFF
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
#262626
Primary button hover
Foreground
#FFFFFF
Background
#545454
Border
#545454
Secondary button
Foreground
#1E1A33
Background
#FFFFFF
Border
#262626
Secondary button hover
Foreground
#1E1A33
Background
hsl(0, 0%, 85%)
Border
#262626
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>

Light Accent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#343A40
Background
#FFFFFF
Accent
#5500FF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#343A40
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(210, 10%, 40%)
Border
transparent
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-accent"></div>

Accent Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#343A40
Background
#F7F4FF
Accent
#5500FF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#5500FF
Border
#5500FF
Primary button hover
Foreground
#FFFFFF
Background
hsl(260, 100%, 40%)
Border
#5500FF
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
hsl(256.8, 100%, 85%)
Border
#EDE6FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme accent-light"></div>

Accent Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#EDE6FF
Background
#5500FF
Accent
#343A40
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#343A40
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(210, 10%, 40%)
Border
transparent
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme accent-dark"></div>

Dark

This is the body text of the theme.

This is the accent color of the theme.

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

Black

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#0D0E10
Accent
currentColor
Border
transparent
Primary button
Foreground
#0D0E10
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#0D0E10
Background
hsl(0, 0%, 85%)
Border
#FFFFFF
Secondary button
Foreground
#FFFFFF
Background
#0D0E10
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
hsl(220, 10%, 40%)
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme black"></div>

Light transparent

This is the body text of the theme.

This is the accent color 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.

This is the accent color 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 gray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F7F7F7
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-gray"></div>

Gray border

This is the body text of the theme.

This is the accent color 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
#FFFFFF
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>

Dark green

This is the body text of the theme.

This is the accent color of the theme.

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

Hospeco Theme

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Accent
#4199D9
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1973B7
Border
#1973B7
Primary button hover
Foreground
#FFFFFF
Background
hsl(205.82, 76%, 40%)
Border
#1973B7
Secondary button
Foreground
#1973B7
Background
#FFFFFF
Border
#1973B7
Secondary button hover
Foreground
#1973B7
Background
hsl(0, 0%, 85%)
Border
#1973B7
Focus outline
#4199D9
Link button
Link color
#4199D9
Link button hover
Link hover color
#0056B3
Focus outline
#4199D9
Implementation
<div class="theme theme-new"></div>

Base
Foreground
#333333
Background
#FFFFFF
Accent
#333333
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
Focus outline
#CCCCCC
Link button
Link color
#FFC107
Link button hover
Link hover color
#BA8B00
Focus outline
#CCCCCC
Implementation
<div class="theme theme-light-link"></div>

Period Partner Heading BG

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#1973B7
Accent
#FFFFFF
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
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 heading-bg"></div>

Hospeco BG

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F0F8FF
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1973B7
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(205.82, 76%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
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 hospeco-bg"></div>

Footer BG

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#243845
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1973B7
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(205.82, 76%, 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
#D5D5D5
Link button hover
Link hover color
hsl(0, 0%, 85%)
Implementation
<div class="theme theme-footerbg"></div>

Hospeco Header

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#E2F5FF
Accent
#333333
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
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-hospecoheader"></div>

Impersonate Theme

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Accent
#4199D9
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1973B7
Border
#1973B7
Primary button hover
Foreground
#FFFFFF
Background
hsl(205.82, 76%, 40%)
Border
#1973B7
Secondary button
Foreground
#FFFFFF
Background
#1973B7
Border
#1973B7
Secondary button hover
Foreground
#FFFFFF
Background
hsl(205.82, 76%, 40%)
Border
#1973B7
Focus outline
#4199D9
Link button
Link color
#4199D9
Link button hover
Link hover color
#0056B3
Focus outline
#4199D9
Implementation
<div class="theme theme-impersonate"></div>

HBG Blue BG

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#071D49
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#27A9E1
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#3090BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#27A9E1
Secondary button hover
Foreground
#FFFFFF
Background
#3090BA
Border
#27A9E1
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-new-hbg-blue"></div>

HBG White BG

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#071D49
Background
#FFFFFF
Accent
#490202
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#27A9E1
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#3090BA
Border
transparent
Secondary button
Foreground
#071D49
Background
#FFFFFF
Border
#27A9E1
Secondary button hover
Foreground
#FFFFFF
Background
#27A9E1
Border
#27A9E1
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-new-white-bg"></div>

HBG Transparent BG

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#071D49
Background
transparent
Accent
#071D49
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#27A9E1
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(198.06, 76%, 40%)
Border
transparent
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
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 hbg-new-transparent-bg"></div>