Themes

Take full control of all the colors

Light

This is the body text of the theme.

This is the accent color of the theme.

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

Light Accent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#343A40
Background
#FFFFFF
Accent
#5500FF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#343A40
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(210, 10%, 40%)
Border
transparent
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-accent"></div>

Accent Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#343A40
Background
#F7F4FF
Accent
#5500FF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#5500FF
Border
#5500FF
Primary button hover
Foreground
#FFFFFF
Background
hsl(260, 100%, 40%)
Border
#5500FF
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
hsl(256,8, 100%, 85%)
Border
#EDE6FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme accent-light"></div>

Accent Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#EDE6FF
Background
#5500FF
Accent
#343A40
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#343A40
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(210, 10%, 40%)
Border
transparent
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme accent-dark"></div>

Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#343A40
Accent
currentColor
Border
transparent
Primary button
Foreground
#343A40
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
Secondary button
Foreground
#FFFFFF
Background
#343A40
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>

Black

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#0D0E10
Accent
currentColor
Border
transparent
Primary button
Foreground
#0D0E10
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#0D0E10
Background
hsl(0, 0%, 85%)
Border
#FFFFFF
Secondary button
Foreground
#FFFFFF
Background
#0D0E10
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
hsl(220, 10%, 40%)
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme black"></div>

Light transparent

This is the body text of the theme.

This is the accent color 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.

This is the accent color 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.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F7F7F7
Accent
#333333
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
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-gray"></div>

Gray border

This is the body text of the theme.

This is the accent color of the theme.

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

Dark green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#314A32
Accent
#333333
Border
transparent
Primary button
Foreground
#314A32
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#314A32
Background
hsl(0, 0%, 85%)
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
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme dark-green"></div>

Dyb skovgrĂžn

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#003D29
Accent
#333333
Border
transparent
Primary button
Foreground
#003D29
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#003D29
Background
#FCFCFC
Border
#003D29
Secondary button
Foreground
#FFFFFF
Background
#E84D26
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#F05027
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#FFFFFF
Link button hover
Link hover color
#F2F2F2
Focus outline
#CCCCCC
Implementation
<div class="theme cerama-forest-green"></div>

Cerama Orange

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#E84D26
Accent
#333333
Border
transparent
Primary button
Foreground
#003D29
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#003D29
Background
#F5F5F5
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003D29
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#004F35
Border
transparent
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 cerama-orange"></div>

Cerama Orange Inverted

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
#E84D26
Border
transparent
Primary button
Foreground
#E84D26
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#E84D26
Background
#EBEBEB
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003D29
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#004F35
Border
transparent
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 cerama-orange-inverted"></div>

Cerama Orange Hvid

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#E84D26
Background
#FFFFFF
Accent
#000000
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#E84D26
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#FF552A
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003D29
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#004F35
Border
transparent
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 cerama-orange-hvid"></div>

Cerama green button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003D29
Background
#FFFFFF
Accent
#000000
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003D29
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#004A32
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#003D29
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#004F35
Border
transparent
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 cerama-green-button"></div>

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