Themes

Take full control of all the colors

Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#00AEEF
Background	#5B6773
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 dark"></div>

Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#262626
Background	#FFFFFF
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#007FC8
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"></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>

Granberg Cyan

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#005A71
Background	#FFFFFF
Accent	currentColor
Border	transparent

Primary button
Foreground	#005A71
Background	#00B6F0
Border	#00B6F0
Primary button hover
Foreground	#FFFFFF
Background	#005A71
Border	#005A71

Secondary button
Foreground	#00B6F0
Background	#FFFFFF
Border	#00B6F0
Secondary button hover
Foreground	#FFFFFF
Background	#00B6F0
Border	#00B6F0
Focus outline	#CCCCCC

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

Implementation


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

Gray light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#5B6773
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#038DFC
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(206,75, 98%, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

Transparent Buttons

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	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent

Link button
Link color	#333333
Link button hover
Link hover color	hsl(0, 0%, 40%)

Implementation


									<div class="theme transparent-buttons"></div>

Gray with Dark Text

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#293A4A
Background	#EFEBE8
Accent	currentColor
Border	transparent

Primary button
Foreground	#293A4A
Background	transparent
Border	#293A4A
Primary button hover
Foreground	#293A4A
Background	transparent
Border	#293A4A

Secondary button
Foreground	#333333
Background	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent

Link button
Link color	#333333
Link button hover
Link hover color	hsl(0, 0%, 40%)

Implementation


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

Light Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#007FC8
Accent	currentColor
Border	#FFFFFF

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 40%)
Border	#FFFFFF

Secondary button
Foreground	#FFFFFF
Background	#007FC8
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 40%)
Border	#FFFFFF

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

Implementation


									<div class="theme light-blue"></div>

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#038DFC
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(206,75, 98%, 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 comm-footer-dark"></div>

COMM Contact Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#038DFC
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(206,75, 98%, 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 comm-contact-dark"></div>

Homepage Text - Image Background

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#000000
Accent	currentColor
Border	transparent

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

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
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 theme-text-image-background"></div>

Homepage List Design

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#007FC8
Accent	currentColor
Border	transparent

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

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
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 homepage-list-design"></div>

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#038DFC
Border	transparent
Primary button hover
Foreground	#00AEEF
Background	#5B6773
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 banner-negative-margin"></div>

Product List Area

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#293A4A
Background	#D4D7DF
Accent	currentColor
Border	transparent

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

Secondary button
Foreground	#FFFFFF
Background	#A4A8B8
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#A4A8B8
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 product-list-area"></div>

Text left image right

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#293A4A
Border	#293A4A
Primary button hover
Foreground	#FFFFFF
Background	hsl(209,09, 29%, 40%)
Border	#293A4A

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 text-left-image-right"></div>

Text right image left

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#293A4A
Border	#293A4A
Primary button hover
Foreground	#FFFFFF
Background	hsl(209,09, 29%, 40%)
Border	#293A4A

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 text-right-image-left"></div>

Border top

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#293A4A
Background	#FFFFFF
Accent	#293A4A
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 border-top"></div>

PDP Add To Cart

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	#293A4A
Background	transparent
Border	#293A4A
Primary button hover
Foreground	#FFFFFF
Background	#007FC8
Border	#007FC8

Secondary button
Foreground	#FFFFFF
Background	#007FC8
Border	#007FC8
Secondary button hover
Foreground	#FFFFFF
Background	#007FC8
Border	#007FC8
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 pdp-add-to-cart"></div>

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 plp-navigation"></div>

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 homepage-navigation"></div>

Homepage Herobanner

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 homepage-herobanner"></div>

PLP Border Top

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 plp-border-top"></div>

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 about-us-banner"></div>

Base
Foreground	#FFFFFF
Background	#333333
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 our-mission-banner"></div>

Dark Header Border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 dark-header-border"></div>

About Page Banners

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 about-page-banners"></div>

Contact Info

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#293A4A
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 contact-info"></div>

PDP Dark Text

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#293A4A
Background	#FFFFFF
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#293A4A
Border	#293A4A
Primary button hover
Foreground	#FFFFFF
Background	hsl(209,09, 29%, 40%)
Border	#293A4A

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 pdp-dark-text"></div>

Registration

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#293A4A
Background	#FFFFFF
Accent	#293A4A
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#007FC8
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(201,9, 100%, 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 registration"></div>

Themes

Dark

Light

Dark Transparent

Granberg Cyan

Gray light

Transparent Buttons

Gray with Dark Text

Light Blue

COMM Footer Dark

COMM Contact Dark

Homepage Text - Image Background

Homepage List Design

Banner Negative Margin

Product List Area

Text left image right

Text right image left

Border top

PDP Add To Cart

PLP Navigation

Homepage Navigation

Homepage Herobanner

PLP Border Top

about us banner

About Us Our Mission Banner

Dark Header Border

About Page Banners

Contact Info

PDP Dark Text

Registration