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>

Dark

This is the body text of the theme.

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

This is the accent color of the theme.

Base
Foreground
#000000
Background
transparent
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 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
#000000
Background
#F7F7F7
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#000000
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#000000
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#000000
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.

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

Theme khaki

This is the body text of the theme.

This is the accent color of the theme.

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

Theme palegold

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#DEC492
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#000000
Border
#000000
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
#000000
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
#333333
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
#333333
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-palegold"></div>

Theme paletaupe

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#FFFFFF
Border
#333333
Primary button hover
Foreground
#FFFFFF
Background
#6A0707
Border
#333333
Secondary button
Foreground
#333333
Background
#FFFFFF
Border
#333333
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
#333333
Focus outline
#6A0707
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#6A0707
Implementation
<div class="theme theme-paletaupe"></div>

Yellow-orange

This is the body text of the theme.

This is the accent color of the theme.

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

Dark-red

This is the body text of the theme.

This is the accent color of the theme.

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

Tysse Sort

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#1C1C1C
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#1C1C1C
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#050505
Border
transparent
Secondary button
Foreground
#1C1C1C
Background
transparent
Border
#1C1C1C
Secondary button hover
Foreground
#050505
Background
transparent
Border
#050505
Focus outline
#262626
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#262626
Implementation
<div class="theme theme-tyssesort"></div>

Tysse Rød

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#121212
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#950A0A
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#6A0707
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#BDBDBD
Background
transparent
Border
#BDBDBD
Focus outline
#CCCCCC
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-tysserød"></div>

Tysse-Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#2B2B2B
Accent
currentColor
Border
transparent
Primary button
Foreground
#2B2B2B
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#6A0707
Border
#6A0707
Secondary button
Foreground
#FFFFFF
Background
#2B2B2B
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 tysse-dark"></div>

Tysse-Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#252624
Border
#252624
Primary button hover
Foreground
#FFFFFF
Background
#950A0A
Border
#950A0A
Secondary button
Foreground
#252624
Background
#FFFFFF
Border
#252624
Secondary button hover
Foreground
#252624
Background
hsl(0, 0%, 85%)
Border
#252624
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme tysse-light"></div>

Tysse-DarkRed

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#2B2B2B
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#980F0F
Border
#980F0F
Primary button hover
Foreground
#FFFFFF
Background
#6A0707
Border
#6A0707
Secondary button
Foreground
#FFFFFF
Background
#2B2B2B
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 tysse-darkred"></div>