Themes

Take full control of all the colors

Light

This is the body text 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.

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.

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.

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.

Base
Foreground	#333333
Background	#F7F7F7
Accent	currentColor
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

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor

Implementation


									<div class="theme theme-gray"></div>

Base
Foreground	#F1F1F1
Background	#073057
Accent	currentColor
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 primary-navigation"></div>

Base
Foreground	#073057
Background	#FFFFFF
Accent	currentColor
Border	transparent

Primary button
Foreground	#007632
Background	transparent
Border	transparent
Primary button hover
Foreground	#007632
Background	#007632
Border	transparent

Secondary button
Foreground	#007632
Background	#007632
Border	transparent
Secondary button hover
Foreground	#007632
Background	#007632
Border	transparent
Focus outline	#073057

Link button
Link color	#333333
Link button hover
Link hover color	#00652A
Focus outline	#073057

Implementation


									<div class="theme primary-navigation-drop-down"></div>

Base
Foreground	#FFFFFF
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#006C32
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#00803E
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#003158
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#003E6A
Border	transparent
Focus outline	#006C32

Link button
Link color	#006C32
Link button hover
Link hover color	hsl(147,78, 100%, 40%)
Focus outline	#006C32

Implementation


									<div class="theme button-in-navigation-fill"></div>

Base
Foreground	#003158
Background	#FFFFFF
Accent	currentColor
Border	#003158

Primary button
Foreground	#003158
Background	transparent
Border	#003158
Primary button hover
Foreground	#FFFFFF
Background	#003158
Border	#003158

Secondary button
Foreground	#FFFFFF
Background	#003158
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#003E6A
Border	transparent
Focus outline	#006C32

Link button
Link color	#006C32
Link button hover
Link hover color	hsl(147,78, 100%, 40%)
Focus outline	#006C32

Implementation


									<div class="theme button-in-navigation-stroke"></div>

Base
Foreground	#000000
Background	#F4F4F4
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
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme secondary-navigation"></div>

Frontpage Slider

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#000000
Accent	#003158
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#006C32
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#00803E
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#003158
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#003E6A
Border	transparent
Focus outline	#006C32

Link button
Link color	#333333
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#006C32

Implementation


									<div class="theme frontpage-slider"></div>

Base
Foreground	#FFFFFF
Background	#003158
Accent	#003E6A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#006C32
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#00803E
Border	transparent

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent
Focus outline	#003158

Link button
Link color	#00803E
Link button hover
Link hover color	#006C32
Focus outline	#003158

Implementation


									<div class="theme footer"></div>

Grey Background

This is the body text of the theme.

Base
Foreground	#000000
Background	#F2F2F2
Accent	#00803E
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00803E
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#006C32
Border	transparent

Secondary button
Foreground	#003E6A
Background	#F2F2F2
Border	#003E6A
Secondary button hover
Foreground	#FFFFFF
Background	#003E6A
Border	#003E6A
Focus outline	#00803E

Link button
Link color	#00803E
Link button hover
Link hover color	#006C32
Focus outline	#00803E

Implementation


									<div class="theme dark-green-background"></div>

White Background

This is the body text of the theme.

Base
Foreground	#000000
Background	#FFFFFF
Accent	#00803E
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00803E
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#006C32
Border	transparent

Secondary button
Foreground	#012D5A
Background	transparent
Border	#012D5A
Secondary button hover
Foreground	#FFFFFF
Background	#012D5A
Border	#012D5A
Focus outline	#00803E

Link button
Link color	#000000
Link button hover
Link hover color	#006C32
Focus outline	#00803E

Implementation


									<div class="theme white-background"></div>

Frontpage - Category

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#003158
Accent	#003E6A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00803E
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#006C32
Border	transparent

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent
Focus outline	#003158

Link button
Link color	#00803E
Link button hover
Link hover color	#006C32
Focus outline	#003158

Implementation


									<div class="theme frontpage-category"></div>

Green button

This is the body text of the theme.

Base
Foreground	currentColor
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00803E
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#006C32
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#006C32
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#00803E
Border	transparent
Focus outline	#00803E

Link button
Link color	#00803E
Link button hover
Link hover color	hsl(149,06, 100%, 40%)
Focus outline	#00803E

Implementation


									<div class="theme green-button"></div>

test theme

This is the body text of the theme.

Base
Foreground	#333
Background	#fff
Accent	#333
Border	transparent

Primary button
Foreground	#FFF
Background	#333
Border	transparent
Primary button hover
Foreground	#FFF
Background	hsl(0, 0%, 40%)
Border	transparent

Secondary button
Foreground	#333
Background	#CCC
Border	transparent
Secondary button hover
Foreground	#333
Background	hsl(0, 0%, 85%)
Border	transparent
Focus outline	#cccccc

Link button
Link color	#333
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#cccccc

Implementation


									<div class="theme theme-new"></div>

Themes

Light

Dark

Light transparent

Dark transparent

Light gray

Primary Navigation

Primary Navigation-Drop-Down

Button In Navigation Fill

Button In Navigation Stroke

Secondary Navigation

Frontpage Slider

Footer

Grey Background

White Background

Frontpage - Category

Green button

test theme