Themes
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>
|
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>
|
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>
|
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>
|
BTS 2024 launch P
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #DFC1FA |
Accent | currentColor |
Border | #EBEBEB |
Primary button | |
---|---|
Foreground | #333333 |
Background | #DFC1FA |
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 bts2024launchp"></div>
|