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
#30434A
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
#4D4C4C
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
Implementation
<div class="theme theme-footer"></div>

By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Functionality, Statistics and Marketing