Themes

Take full control of all the colors

No theme

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	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 no-theme"></div>

Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Primary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333

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

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.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#0033A0
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#0033A0
Border	#0033A0
Primary button hover
Foreground	#FFFFFF
Background	#0033A0
Border	#0033A0

Secondary button
Foreground	#0033A0
Background	#FFFFFF
Border	#0033A0
Secondary button hover
Foreground	#0033A0
Background	hsl(0, 0%, 85%)
Border	#0033A0
Focus outline	#0033A0

Link button
Link color	currentColor
Link button hover
Link hover color	#0033A0
Focus outline	#0033A0

Implementation


									<div class="theme dark"></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	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.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#F0F2F3
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#EE6300
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(24,96, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

Dark grey

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#787878
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#EE6300
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(24,96, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme dark-grey"></div>

Blue and Orange

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#0033A0
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#EE6300
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(24,96, 100%, 40%)
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	#D65900
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	hsl(24,95, 100%, 40%)
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-blue-and-orange"></div>

Light with Blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#0033A0
Background	#FFFFFF
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#EE6300
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#D65900
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-light-with-blue"></div>

Footer

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#232C33
Background	#F8F8F8
Accent	#333333
Border	transparent

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

Implementation


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

Titles

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#0548B8
Background	transparent
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 titles-theme"></div>

Cart

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#FFFFFF
Background	#0F73EE
Border	#0F73EE
Primary button hover
Foreground	#FFFFFF
Background	#0F73EE
Border	#0F73EE

Secondary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Secondary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333

Link button
Link color	#0F73EE
Link button hover
Link hover color	#0F73EE

Implementation


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

Cards

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#F3F4F4
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 theme-cards"></div>

GenericList

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#0548B8
Background	#FFFFFF
Accent	#0548B8
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#0548B8
Border	#0548B8
Primary button hover
Foreground	#FFFFFF
Background	hsl(217,54, 95%, 40%)
Border	#0548B8

Secondary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Secondary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333
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-genericlist"></div>

ALLM_ProductListBorder

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
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 theme-productlist-border"></div>

Slider

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#0F73EE
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#0F73EE
Background	hsl(0, 0%, 85%)
Border	#FFFFFF

Secondary button
Foreground	#FFFFFF
Background	#0F73EE
Border	#0F73EE
Secondary button hover
Foreground	#FFFFFF
Background	hsl(213,09, 88%, 40%)
Border	#0F73EE
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-slider"></div>

Slider Overlay

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	transparent
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#0033A0
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#0033A0
Background	hsl(0, 0%, 85%)
Border	#FFFFFF

Secondary button
Foreground	#FFFFFF
Background	#0033A0
Border	#0033A0
Secondary button hover
Foreground	#FFFFFF
Background	hsl(220,88, 100%, 40%)
Border	#0033A0

Link button
Link color	#FFFFFF
Link button hover
Link hover color	hsl(0, 0%, 85%)

Implementation


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

Base
Foreground	#07A330
Background	#E6F6EA
Accent	#07A330
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	#07A330
Link button hover
Link hover color	hsl(135,77, 92%, 40%)

Implementation


									<div class="theme theme-discount-banner"></div>

Base
Foreground	#0F73EE
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#0F73EE
Background	#E6F1FE
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#0F73EE
Border	transparent

Secondary button
Foreground	#0F73EE
Background	#E6F1FE
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#0F73EE
Border	transparent

Link button
Link color	#0F73EE
Link button hover
Link hover color	#0F73EE

Implementation


									<div class="theme theme-selected-facets"></div>

TextAndImageBgGray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#232C33
Background	#F8F8F8
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#0F73EE
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#0F73EE
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	#0F73EE
Link button hover
Link hover color	hsl(213,09, 88%, 40%)

Implementation


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

TextTruncate3Rows

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#232C33
Background	#FFFFFF
Accent	#0F73EE
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	#0F73EE
Link button hover
Link hover color	#0F73EE

Implementation


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

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

Primary button
Foreground	#FFFFFF
Background	#0F73EE
Border	#0F73EE
Primary button hover
Foreground	#FFFFFF
Background	#0F73EE
Border	#0F73EE

Secondary button
Foreground	#0F73EE
Background	#F3F4F4
Border	#D3D4D6
Secondary button hover
Foreground	#0F73EE
Background	#F3F4F4
Border	#D3D4D6

Link button
Link color	#0F73EE
Link button hover
Link hover color	#0F73EE

Implementation


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

BlueTitleAccent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#0548B8
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 theme-bluetitleaccent"></div>

TextOrange

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#EE6300
Background	#FFFFFF
Accent	#EE6300
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#0033A0
Border	#0033A0
Primary button hover
Foreground	#FFFFFF
Background	#0033A0
Border	#0033A0

Secondary button
Foreground	#0033A0
Background	#FFFFFF
Border	#0033A0
Secondary button hover
Foreground	#0033A0
Background	hsl(0, 0%, 85%)
Border	#0033A0

Link button
Link color	#EE6300
Link button hover
Link hover color	hsl(24,96, 100%, 40%)

Implementation


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

Column Direction

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
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 theme-column-direction"></div>

GenericList2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#0548C8
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#0F73EE
Border	#0F73EE
Primary button hover
Foreground	#0F73EE
Background	hsl(213,09, 88%, 40%)
Border	#0F73EE

Secondary button
Foreground	#FFFFFF
Background	#333333
Border	#333333
Secondary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333
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-genericlist2"></div>

Themes

No theme

Light

Dark

Light transparent

Dark transparent

Light gray

Dark grey

Blue and Orange

Light with Blue

Footer

Titles

Cart

Cards

GenericList

ALLM_ProductListBorder

Slider

Slider Overlay

discount banner

Selected Facets

TextAndImageBgGray

TextTruncate3Rows

BlueTitleAccent

TextOrange

Column Direction

GenericList2

Themes

No theme

Light

Dark

Light transparent

Dark transparent

Light gray

Dark grey

Blue and Orange

Light with Blue

Footer

Titles

Cart

Cards

GenericList

ALLM_ProductListBorder

Slider

Slider Overlay

discount banner

Selected Facets

TextAndImageBgGray

TextTruncate3Rows

SignInPage

BlueTitleAccent

TextOrange

Column Direction

GenericList2