Themes

Take full control of all the colors

White

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#5E5E57
Background
#FFFFFF
Accent
#0B2D2D
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1E4E4B
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(176.25, 44%, 40%)
Border
transparent
Secondary button
Foreground
#1E4E4B
Background
#FFFFFF
Border
#1E4E4B
Secondary button hover
Foreground
#1E4E4B
Background
hsl(0, 0%, 85%)
Border
#1E4E4B
Focus outline
#8F5145
Link button
Link color
#082612
Link button hover
Link hover color
hsl(140, 65%, 40%)
Focus outline
#8F5145
Implementation
<div class="theme theme-white"></div>

Beige

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#272525
Background
#D9D7C5
Accent
#0B2D2D
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1E4E4B
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(176.25, 44%, 40%)
Border
transparent
Secondary button
Foreground
#1E4E4B
Background
transparent
Border
#1E4E4B
Secondary button hover
Foreground
#1E4E4B
Background
transparent
Border
#1E4E4B
Focus outline
#403E3B
Link button
Link color
#272525
Link button hover
Link hover color
hsl(0, 3%, 40%)
Focus outline
#403E3B
Implementation
<div class="theme theme-beige"></div>

Mørkegrøn

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#0B2D2D
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#0B2D2D
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#0B2D2D
Background
hsl(0, 0%, 85%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Focus outline
#1BBA89
Link button
Link color
#FFFFFF
Link button hover
Link hover color
hsl(0, 0%, 85%)
Focus outline
#1BBA89
Implementation
<div class="theme theme-darkgreen"></div>

Lysegrøn

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#082612
Background
#1BBA89
Accent
#082612
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#082612
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(140, 65%, 40%)
Border
transparent
Secondary button
Foreground
#082612
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#082612
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#082612
Link button hover
Link hover color
hsl(140, 65%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-lightgreen"></div>

Grøn

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#1E4E4B
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#1E4E4B
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#1E4E4B
Background
#FFFFFF
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#1E4E4B
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
#1E4E4B
Border
#FFFFFF
Focus outline
#CCCCCC
Link button
Link color
#FFFFFF
Link button hover
Link hover color
hsl(0, 0%, 85%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-green"></div>

Brun

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#8F5145
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#8F5145
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#8F5145
Background
hsl(0, 0%, 85%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Focus outline
#CCCCCC
Link button
Link color
#FFFFFF
Link button hover
Link hover color
hsl(0, 0%, 85%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-brown"></div>