Themes

Take full control of all the colors

No theme

This is the body text of the theme.

Base
Foreground	currentColor
Background	transparent
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#30434A
Border	#30434A
Primary button hover
Foreground	#FFFFFF
Background	hsl(196.15, 21%, 40%)
Border	#30434A

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent

Implementation


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

Light

This is the body text of the theme.

Base
Foreground	#262626
Background	#FFFFFF
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#262626
Border	#262626
Primary button hover
Foreground	#FFFFFF
Background	#545454
Border	#545454

Secondary button
Foreground	#262626
Background	#FFFFFF
Border	#262626
Secondary button hover
Foreground	#262626
Background	hsl(0, 0%, 85%)
Border	#262626

Implementation


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

Dark

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#262626
Border	transparent

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

Secondary button
Foreground	#FFFFFF
Background	#262626
Border	#FFFFFF
Secondary button hover
Foreground	#262626
Background	#FFFFFF
Border	#FFFFFF

Implementation


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

Light transparent

This is the body text of the theme.

Base
Foreground	#262626
Background	transparent
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

Implementation


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

Dark transparent

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	transparent
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

Implementation


									<div class="theme dark-transparent"></div>

Light gray

This is the body text of the theme.

Base
Foreground	#333333
Background	#F7F7F7
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

Implementation


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

Gray border

This is the body text of the theme.

Base
Foreground	#30434A
Background	#FFFFFF
Border	#EBEBEB

Primary button
Foreground	#FFFFFF
Background	#30434A
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(196.15, 21%, 40%)
Border	transparent

Secondary button
Foreground	#30434A
Background	#FFFFFF
Border	#30434A
Secondary button hover
Foreground	#30434A
Background	hsl(0, 0%, 85%)
Border	#30434A

Implementation


									<div class="theme theme-gray-border"></div>

Theme khaki

This is the body text of the theme.

Base
Foreground	#333333
Background	#BEBF9F
Border	transparent

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	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333
Focus outline	#CCCCCC

Implementation


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

Theme palegold

This is the body text of the theme.

Base
Foreground	#333333
Background	#DEC492
Border	transparent

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	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333
Focus outline	#CCCCCC

Implementation


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

Theme paletaupe

This is the body text of the theme.

Base
Foreground	#333333
Background	#C79F81
Border	transparent

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	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333
Focus outline	#CCCCCC

Implementation


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

Yellow-orange

This is the body text of the theme.

Base
Foreground	#262626
Background	#FFCB1F
Border	transparent

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

Secondary button
Foreground	#262626
Background	#FFFFFF
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	#262626
Border	#262626

Implementation


									<div class="theme yellow-orange"></div>

Dark-red

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#AD0000
Border	transparent

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

Secondary button
Foreground	#262626
Background	#FFFFFF
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	#262626
Border	#262626

Implementation


									<div class="theme dark-red"></div>

Transparent

This is the body text of the theme.

Base
Foreground	#333333
Background	#FFFF70
Border	#991814

Primary button
Foreground	#333333
Background	transparent
Border	#70120F
Primary button hover
Foreground	#333333
Background	transparent
Border	#B81E19

Secondary button
Foreground	#333333
Background	transparent
Border	#365EFF
Secondary button hover
Foreground	#333333
Background	transparent
Border	#365EFF
Focus outline	#CCCCCC

Implementation


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

Header

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#151E34
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#30434A
Border	#30434A
Primary button hover
Foreground	#FFFFFF
Background	hsl(196.15, 21%, 40%)
Border	#30434A

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

Base
Foreground	#FFFFFF
Background	#151E34
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#151E34
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(222.58, 42%, 40%)
Border	transparent

Secondary button
Foreground	#151E34
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#151E34
Background	hsl(0, 0%, 85%)
Border	transparent
Focus outline	#CCCCCC

Implementation


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

Themes

No theme

Light

Dark

Light transparent

Dark transparent

Light gray

Gray border

Theme khaki

Theme palegold

Theme paletaupe

Yellow-orange

Dark-red

Transparent

Header

Footer