Themes
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 |
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 |
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>
|
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 |
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>
|