Themes

Take full control of all the colors

Theme 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	#FFFFFF
Background	#000000
Border	transparent
Secondary button hover
Foreground	#333333
Background	#E6E6E6
Border	#E6E6E6
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>

Theme dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#212529
Accent	currentColor
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent

Secondary button
Foreground	#333333
Background	#F7F7F7
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 dark"></div>

Theme gray

This is the body text of the theme.

This is the accent color of the theme.

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

Theme Yellow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#EFBD2D
Accent	currentColor
Border	transparent

Primary button
Foreground	#000000
Background	#EFBD2D
Border	#000000
Primary button hover
Foreground	#000000
Background	hsl(44.54, 86%, 85%)
Border	#000000

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 yellow"></div>

Theme Yellow light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#EFBD2D
Accent	currentColor
Border	transparent

Primary button
Foreground	#000000
Background	#EFBD2D
Border	transparent
Primary button hover
Foreground	#000000
Background	hsl(44.54, 86%, 85%)
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 yellowlight"></div>

Theme Red

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#F94410
Accent	currentColor
Border	transparent

Primary button
Foreground	#F94410
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#F94410
Background	hsl(0, 0%, 85%)
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 red"></div>

Theme Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#3B77AA
Accent	currentColor
Border	transparent

Primary button
Foreground	#3B77AA
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#3B77AA
Background	hsl(0, 0%, 85%)
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 blue"></div>

Theme light background transparent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#000000
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 lightbackgroundtransparent"></div>

Theme dark transparent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent

Secondary button
Foreground	#333333
Background	#FFFFFF
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 darktransparent"></div>

Theme lilla

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#6328E0
Accent	currentColor
Border	transparent

Primary button
Foreground	#6328E0
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#6328E0
Background	hsl(0, 0%, 85%)
Border	transparent

Secondary button
Foreground	#333333
Background	#F7F7F7
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 lilla"></div>

Theme darkgrey

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#DEDEDE
Accent	currentColor
Border	transparent

Primary button
Foreground	#3530CF
Background	transparent
Border	#333333
Primary button hover
Foreground	#3530CF
Background	transparent
Border	#333333

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 darkgrey"></div>

Transparent with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#000000
Border	#000000
Primary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#000000

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333
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 transparentwithborder"></div>

Theme darkgrey2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#DEDEDE
Accent	currentColor
Border	transparent

Primary button
Foreground	#3530CF
Background	#C9C9C9
Border	#C9C9C9
Primary button hover
Foreground	#3530CF
Background	hsl(0, 0%, 85%)
Border	#C9C9C9

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 darkgrey2"></div>

Transparent test

This is the body text of the theme.

This is the accent color of the theme.

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

Theme red2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#B4100D
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#000000
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#000000
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	#333333
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#CCCCCC

Implementation


									<div class="theme theme-red2"></div>

Theme orange

This is the body text of the theme.

This is the accent color of the theme.

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

Theme purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#BF4C91
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#333333
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	#333333
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#CCCCCC

Implementation


									<div class="theme theme-purple"></div>

Theme Yellow2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#E9E151
Accent	#333333
Border	transparent

Primary button
Foreground	#333333
Background	#333333
Border	#333333
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 40%)
Border	#333333

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 yellow2"></div>

Theme Yellow light2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#F7F4C1
Accent	#333333
Border	transparent

Primary button
Foreground	#333333
Background	#333333
Border	#333333
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 40%)
Border	#333333

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 yellowlight2"></div>

Theme blue2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#0057BA
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 blue2"></div>

Theme dark blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#003470
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 darkblue"></div>

Theme for facet group buttons

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#333333
Border	#333333

Primary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333

Secondary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Secondary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333
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 themeforfacetbuttons"></div>

Theme light with orange button

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	#F64F00
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(19.27, 100%, 40%)
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#000000
Border	transparent
Secondary button hover
Foreground	#333333
Background	#E6E6E6
Border	#E6E6E6
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 lightwithorange"></div>

Theme gray with orange button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#F7F7F7
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#F64F00
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(19.27, 100%, 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 graywithorangebutton"></div>

Theme dark purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#462E6C
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF

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	#FFFFFF
Link button hover
Link hover color	hsl(0, 0%, 85%)
Focus outline	#CCCCCC

Implementation


									<div class="theme darkpurple"></div>

Theme purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#754BB3
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF

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	#FFFFFF
Link button hover
Link hover color	hsl(0, 0%, 85%)
Focus outline	#CCCCCC

Implementation


									<div class="theme purple"></div>

Buttons

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#4D4D4D
Border	#333333
Primary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333
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 buttons"></div>

Theme black

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#000000
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent

Secondary button
Foreground	#333333
Background	#F7F7F7
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 black"></div>

Buttons2

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	#F27638
Border	#333333
Primary button hover
Foreground	#FFFFFF
Background	hsl(20, 88%, 40%)
Border	#333333

Secondary button
Foreground	#333333
Background	#12F7FF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(182.03, 100%, 85%)
Border	#333333
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 buttons2"></div>