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
#15161A
Background
#FFFFFF
Accent
#03E298
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#15161A
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(228, 11%, 40%)
Border
transparent
Secondary button
Foreground
#15161A
Background
#03E298
Border
transparent
Secondary button hover
Foreground
#343A40
Background
#CCFFE2
Border
#CCFFE2
Link button
Link color
#03E298
Link button hover
Link hover color
hsl(160,09, 97%, 85%)
Implementation
<div class="theme light-accent"></div>

Mennt Vanilla

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#191919
Background
#E1D5C6
Accent
#191919
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#191919
Border
#191919
Primary button hover
Foreground
#FFFFFF
Background
#131313
Border
#131313
Secondary button
Foreground
#191919
Background
transparent
Border
#191919
Secondary button hover
Foreground
#131313
Background
transparent
Border
#131313
Link button
Link color
#191919
Link button hover
Link hover color
#131313
Implementation
<div class="theme mennt-vanilla"></div>

Dark mennt

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#15161A
Accent
#01C38E
Border
transparent
Primary button
Foreground
#15161A
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#15161A
Background
#01C38E
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#01C38E
Background
transparent
Border
#01C38E
Link button
Link color
#FFFFFF
Link button hover
Link hover color
#01C38E
Implementation
<div class="theme dark-mennt"></div>

Mennt-panter

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#262626
Accent
#03E298
Border
transparent
Primary button
Foreground
#414B43
Background
#03E298
Border
transparent
Primary button hover
Foreground
#03E298
Background
#029665
Border
transparent
Secondary button
Foreground
#262626
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#191919
Background
#E8E8E8
Border
#FFFFFF
Link button
Link color
#03E298
Link button hover
Link hover color
#03BD7F
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
#333333
Border
transparent
Primary button
Foreground
#414B43
Background
#03E298
Border
transparent
Primary button hover
Foreground
#03E298
Background
#029665
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#FFFFFF
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-transparent"></div>

Light gray

This is the body text of the theme.

This is the accent color of the theme.

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

Dark green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#314A32
Accent
currentColor
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
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme dark-green"></div>

Mennt Granskog

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#414B43
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#414B43
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#353D37
Background
#E3E3E3
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
#FFFFFF
Secondary button hover
Foreground
#E3E3E3
Background
transparent
Border
#E3E3E3
Link button
Link color
#FFFFFF
Link button hover
Link hover color
#E3E3E3
Implementation
<div class="theme mennt-granskog"></div>