Themes

Take full control of all the colors

Analyze usage of all themes

Theme grey

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#898989
Background	#F7F7F7
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-grey"></div>

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	#000000
Background	#FFFFFF
Border	#000000
Primary button hover
Foreground	#FFFFFF
Background	#000000
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 theme-light"></div>

theme-sand

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333
Background	#fff
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFF
Background	#333
Border	transparent
Primary button hover
Foreground	#FFF
Background	#333
Border	transparent

Secondary button
Foreground	#333
Background	#CCC
Border	transparent
Secondary button hover
Foreground	#333
Background	#CCC
Border	transparent

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

Implementation


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

Theme light2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#353535
Background	#FFFFFF
Accent	currentColor
Border	transparent

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

Secondary button
Foreground	#353535
Background	#FFFFFF
Border	transparent
Secondary button hover
Foreground	#353535
Background	#FFFFFF
Border	transparent

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

Implementation


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

Theme white-text

This is the body text of the theme.

This is the accent color of the theme.

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

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