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>