Themes

Take full control of all the colors

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
#1E1A33
Background
#FFFFFF
Border
#262626
Secondary button hover
Foreground
#1E1A33
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
#020437
Border
transparent
Primary button
Foreground
#020437
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Secondary button
Foreground
#FFFFFF
Background
#020437
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
#020437
Background
transparent
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#9751FF
Border
#9751FF
Primary button hover
Foreground
#9751FF
Background
#FFFFFF
Border
#9751FF
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
#333333
Background
#FFFFFF
Border
#EBEBEB
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
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Implementation
<div class="theme theme-gray-border"></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>

Dark Background

This is the body text of the theme.

Base
Foreground
currentColor
Background
#020437
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 theme-dark-background"></div>

Gradient Cyan

This is the body text of the theme.

Base
Foreground
#00ADEE
Background
#FFFFFF
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 gradient-cyan"></div>

Gradient Magenta

This is the body text of the theme.

Base
Foreground
#9751FF
Background
#FFFFFF
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 gradient-magenta"></div>

Custom commergent header sticky

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#020437
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-background-header"></div>

Custom commergent

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#9751FF
Border
transparent
Primary button hover
Foreground
#9751FF
Background
#FFFFFF
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-new"></div>

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