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

Theme 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	#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 Redheader

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#942A25
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#942A25
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(2.7, 60%, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

theme RedFont

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#942A25
Background	transparent
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
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

theme poster

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#000000
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#942A25
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#942A25
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 theme-poster"></div>

theme slider

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#FFFFFF
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#005E00
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(120, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

theme grey

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#898E93
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
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

theme Greenbutton

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#404040
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#005E00
Border	#005E00
Primary button hover
Foreground	#FFFFFF
Background	hsl(120, 100%, 40%)
Border	#005E00

Secondary button
Foreground	#333333
Background	#E2F5DF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(111.82, 52%, 85%)
Border	#333333
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

Theme border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	currentColor
Background	transparent
Accent	currentColor
Border	#CCCCCC

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
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

theme light grey

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
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
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

Theme whitebutton

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#000000
Background	#FFFFFF
Border	#CCCCCC
Primary button hover
Foreground	#942A25
Background	#FFFFFF
Border	#CCCCCC

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

theme slider with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#FFFFFF
Accent	currentColor
Border	#D6D6D6

Primary button
Foreground	#FFFFFF
Background	#005E00
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(120, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

Theme light with 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	#CCCCCC

Primary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Primary button hover
Foreground	#FFFFFF
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

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor

Implementation


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

theme winered button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#1F1919
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#942A25
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#C93932
Border	transparent

Secondary button
Foreground	#454545
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#454545
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 theme-winered-button"></div>

theme light with red redfont

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#942A25
Background	#FFFFFF
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
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme light-redfont"></div>