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>

Link Light

This is the body text of the theme.

This is the accent color of the theme.

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>