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	#FFFFFF
Background	#104E59
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
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	#000000
Background	#FFFFFF
Accent	currentColor
Border	transparent

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

Secondary button
Foreground	#000000
Background	#000000
Border	transparent
Secondary button hover
Foreground	#007632
Background	#007632
Border	transparent
Focus outline	#45A29B

Link button
Link color	#000000
Link button hover
Link hover color	#00652A
Focus outline	#45A29B

Implementation


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

Base
Foreground	#FFFFFF
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#104E59
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Focus outline	#104E59

Link button
Link color	#104E59
Link button hover
Link hover color	hsl(189.04, 70%, 40%)
Focus outline	#104E59

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	#45A29B
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#3E918B
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#104E59
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#166E7D
Border	transparent
Focus outline	#3E918B

Link button
Link color	#3E918B
Link button hover
Link hover color	hsl(175.66, 40%, 40%)
Focus outline	#3E918B

Implementation


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

Base
Foreground	#FFFFFF
Background	#104E59
Accent	#104E59
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent
Focus outline	#45A29B

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#45A29B

Implementation


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

Grey Background

This is the body text of the theme.

Base
Foreground	#000000
Background	#F2F2F2
Accent	#45A29B
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	#104E59
Background	#F2F2F2
Border	#104E59
Secondary button hover
Foreground	#FFFFFF
Background	#104E59
Border	#104E59
Focus outline	#45A29B

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#45A29B

Implementation


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

White Background

This is the body text of the theme.

Base
Foreground	#000000
Background	#FFFFFF
Accent	#45A29B
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#104E59
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Focus outline	#45A29B

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#45A29B

Implementation


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

Frontpage - Category

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#104E59
Accent	#104E59
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent
Focus outline	#104E59

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#104E59

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>

Yellow button

This is the body text of the theme.

Base
Foreground	currentColor
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#E0DC42
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#D6D23F
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#E0DC42
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#00803E
Border	transparent

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

Implementation


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

add to cart

This is the body text of the theme.

Base
Foreground	#000000
Background	transparent
Accent	#104E59
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#104E59
Border	#104E59
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	#104E59

Secondary button
Foreground	#FFFFFF
Background	#45A29B
Border	#45A29B
Secondary button hover
Foreground	#FFFFFF
Background	#45A29B
Border	#45A29B
Focus outline	#104E59

Link button
Link color	#104E59
Link button hover
Link hover color	hsl(189.04, 70%, 40%)
Focus outline	#104E59

Implementation


									<div class="theme button-add-to-cart"></div>

Full trucks

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#104E59
Accent	#104E59
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#104E59
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	#45A29B
Border	#FFFFFF

Secondary button
Foreground	currentColor
Background	transparent
Border	transparent
Secondary button hover
Foreground	currentColor
Background	transparent
Border	transparent
Focus outline	#104E59

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#104E59

Implementation


									<div class="theme full-trucks"></div>

Master template

This is the body text of the theme.

Base
Foreground	#104E59
Background	#FFFFFF
Accent	#45A29B
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#104E59
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Focus outline	#45A29B

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#45A29B

Implementation


									<div class="theme master-template"></div>

Light Green Background

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#45A29B
Accent	#45A29B
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#104E59
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#104E59
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#45A29B
Border	transparent
Focus outline	#45A29B

Link button
Link color	#45A29B
Link button hover
Link hover color	#006C32
Focus outline	#45A29B

Implementation


									<div class="theme litegreen-background"></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

Yellow button

add to cart

Full trucks

Master template

Light Green Background