Themes

Take full control of all the colors

Light

This is the body text of the theme.

Base
Foreground
#262626
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
#262626
Primary button hover
Foreground
#262626
Background
#FFFFFF
Border
#FFFFFF
Secondary button
Foreground
#1E1A33
Background
#FFFFFF
Border
#262626
Secondary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light"></div>

Dark

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#262626
Accent
currentColor
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
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark"></div>

Light transparent

This is the body text of the theme.

Base
Foreground
#262626
Background
transparent
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 light-transparent"></div>

Dark transparent

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
currentColor
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
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dark-transparent"></div>

Light gray

This is the body text of the theme.

Base
Foreground
#333333
Background
#F7F7F7
Accent
currentColor
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
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray"></div>

Gray border

This is the body text of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
currentColor
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
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray-border"></div>

blue

This is the body text of the theme.

Base
Foreground
#000000
Background
#F2FBFE
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#333333
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 blue"></div>