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	#000000
Background	#FFFFFF
Accent	currentColor
Border	transparent

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

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	#CCCCCC
Border	transparent

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

Implementation


									<div class="theme theme-light"></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	currentColor
Border	transparent

Primary button
Foreground	#34A245
Background	transparent
Border	#34A245
Primary button hover
Foreground	#FFFFFF
Background	#333333
Border	#34A245

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	#CCCCCC
Border	transparent

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

Implementation


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

Theme yellow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#FBBF00
Accent	#000000
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	#000000
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#000000
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 yellow"></div>

Theme yellow with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#FBBF00
Accent	#000000
Border	#000000

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

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

Theme white with border

This is the body text of the theme.

This is the accent color of the theme.

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

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

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

Theme rose

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#FFD1B9
Accent	#000000
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	#000000
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#000000
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 rose"></div>

Theme black with border

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#34A245
Background	transparent
Border	#34A245
Primary button hover
Foreground	#34A245
Background	transparent
Border	#34A245

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

Theme green with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#34A245
Accent	#000000
Border	#000000

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

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

Theme green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#34A245
Accent	#000000
Border	transparent

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

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

Theme grey

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#D1D1D1
Accent	currentColor
Border	transparent

Primary button
Foreground	#34A245
Background	transparent
Border	#34A245
Primary button hover
Foreground	#FFFFFF
Background	#333333
Border	#34A245

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	#CCCCCC
Border	transparent

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

Implementation


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

Theme transparent with border

This is the body text of the theme.

This is the accent color of the theme.

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

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

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

Theme blue with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#6BA1FF
Accent	#000000
Border	#000000

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

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

Theme blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#6BA1FF
Accent	#000000
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	#000000
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#000000
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 blue"></div>

Theme orange with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#EA4E1D
Accent	#000000
Border	#000000

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

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

Theme orange

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#EA4E1D
Accent	#000000
Border	#000000

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

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

Theme for tag buttons

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

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	#CCCCCC
Border	transparent

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

Implementation


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