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>

Homepage Navigation

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-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>

about us banner

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-us-banner"></div>

About Us Our Mission Banner

This is the body text of the theme.

This is the accent color of the theme.

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>

PLP Navigation

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-navigation"></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>

By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Statistics and Marketing