Themes
Take full control of all the colors
VL Coconut
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #D3C699 |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 vlcoconut"></div>
|
YEP 2023
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FAFAFA |
| Background | #9B0A33 |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 yeptheme"></div>
|
No theme
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | currentColor |
| Background | #FFFFFF |
| 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 notheme"></div>
|
Light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #B3B3B3 |
| 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.
This is the accent color 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.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| 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 | #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 | #FFFFFF |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| 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-transparent"></div>
|
Light gray
This is the body text of the theme.
This is the accent color 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>
|
Gray border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #EBEBEB |
| 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-border"></div>
|
Nespresso-test
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 | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #636363 |
| 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 nespressotest"></div>
|
Frontpage Top Image Text
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 | #111111 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #111111 |
| Background | hsl(0, 0%, 85%) |
| 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 frontpage-top-image-top"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| 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 footer-black"></div>
|
Næstuhvitt-email
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #ECE8E5 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #ECE8E5 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(25,71, 16%, 85%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #000000 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Focus outline | #000000 |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #000000 |
| Implementation |
<div class="theme almostwhite"></div>
|
bleikur-email
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F2C9C9 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #F2C9C9 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 61%, 85%) |
| Border | #000000 |
| 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 emailpink"></div>
|
Ljosbrunn-email
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #C4A484 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #C4A484 |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(30, 35%, 85%) |
| 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 ljosbrunn"></div>
|
hvittemail
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #ECE8E5 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| 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 clearemail"></div>
|
grattfyrir-footer
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #CACBC6 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #CACBC6 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(72, 5%, 85%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #000000 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Focus outline | #000000 |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #000000 |
| Implementation |
<div class="theme grayforfoot"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #161614 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #161614 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #161614 |
| Background | hsl(0, 0%, 85%) |
| 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 footer-copy-text"></div>
|
Product Grid Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FAF9F8 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3D8705 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #316B04 |
| 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 productbackground"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| 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 |
| Focus outline | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme newsletter-nespresso-recommends"></div>
|
Product Container
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3D8705 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #316B04 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3D8705 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #316B04 |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme productcontainer"></div>
|
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #856D43 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #856D43 |
| Background | hsl(0, 0%, 85%) |
| 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 nav_bar_nespresso"></div>
|
Facets
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #F9F9F9 |
| Accent | currentColor |
| Border | #DEDDDD |
| 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 facets_theme"></div>
|
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #B3B3B3 |
| 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 megamenu"></div>
|
Store message
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #856D43 |
| 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 theme-new"></div>
|
graent-email
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #A3B07B |
| 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 | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme graentemail"></div>
|
burgundy-fall
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #843C39 |
| Border | #F2F2F2 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(2,4, 40%, 40%) |
| Border | #F2F2F2 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme burgundy-fall"></div>
|
Dark transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| 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 dokkurtransp-transparent"></div>
|
fallburgundy-email
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FAFAFA |
| Background | #843C39 |
| Accent | #FCFCFC |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #843C39 |
| Border | #F7F7F7 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(2,4, 40%, 40%) |
| Border | #F7F7F7 |
| Secondary button | |
|---|---|
| Foreground | #E0E0E0 |
| Background | #F5F5F5 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #E0E0E0 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #FFFFFF |
| Link button | |
|---|---|
| Link color | #CCCCCC |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme fallburgundy-email"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #B5C7E0 |
| 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 headerbanner"></div>
|
Summer2023purple
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #CDD2E6 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #CDD2E6 |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(228, 33%, 85%) |
| 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 summer2023purple"></div>
|
Black Friday 2023
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #EC90A2 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #ECE8E5 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(25,71, 16%, 85%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #000000 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Focus outline | #000000 |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #000000 |
| Implementation |
<div class="theme blackfriday23"></div>
|
Summer2023peach
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F18070 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F18070 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(7,44, 82%, 85%) |
| 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 summer2023peach"></div>
|
Backtoschool2023
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FF8877 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FF8877 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(7,5, 100%, 85%) |
| 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 backtoschool2023"></div>
|
Backtoschool2023green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #A2FF45 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #A2FF45 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(90, 100%, 85%) |
| 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 backtoschool2023green"></div>
|
summervertuo1
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #F8F7F3 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | #F8F7F3 |
| Border | #333333 |
| Primary button hover | |
| Foreground | currentColor |
| Background | hsl(48, 26%, 85%) |
| Border | #333333 |
| 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 summervertuo1"></div>
|
fall2023peachypeach
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFF7ED |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | #FFF7ED |
| Border | #333333 |
| Primary button hover | |
| Foreground | currentColor |
| Background | hsl(33,33, 100%, 85%) |
| Border | #333333 |
| 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 fall2023peachypeach"></div>
|
summervertuo
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #E7E9ED |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | #E7E9ED |
| Border | #333333 |
| Primary button hover | |
| Foreground | currentColor |
| Background | hsl(220, 14%, 85%) |
| Border | #333333 |
| 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 summervertuo"></div>
|
Valentines
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #E0AB9C |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 valentines"></div>
|
Big Bang promo
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #C9D3DC |
| Accent | currentColor |
| Border | #C9D3DC |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #FFFFFF |
| Border | #262626 |
| 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 bigbang"></div>
|
SP
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FAD2C7 |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 springpromotion"></div>
|
Coffee Days
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #D39276 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #D39276 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #FFFFFF |
| 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 coffeedays"></div>
|