Themes
Take full control of all the colors
Light
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #545454 |
| Border | #545454 |
| Secondary button | |
|---|---|
| Foreground | #1E1A33 |
| Background | #FFFFFF |
| Border | #262626 |
| Secondary button hover | |
| Foreground | #1E1A33 |
| Background | hsl(0, 0%, 85%) |
| Border | #262626 |
| Implementation |
<div class="theme light"></div>
|
Dark
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| 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 |
| Implementation |
<div class="theme dark"></div>
|
Light transparent
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | transparent |
| 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 |
| Implementation |
<div class="theme light-transparent"></div>
|
Dark transparent
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| 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 |
| Implementation |
<div class="theme dark-transparent"></div>
|
Light gray
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| 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 |
| Implementation |
<div class="theme theme-gray"></div>
|
Gray border
This is the body text of the theme.
| 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 | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Implementation |
<div class="theme theme-gray-border"></div>
|
Theme khaki
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #BEBF9F |
| 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 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-khaki"></div>
|
Theme palegold
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #DEC492 |
| 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 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-palegold"></div>
|
Theme paletaupe
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #C79F81 |
| 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 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-paletaupe"></div>
|
Yellow-orange
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFCB1F |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Secondary button | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Implementation |
<div class="theme yellow-orange"></div>
|
Dark-red
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #AD0000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Secondary button | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Implementation |
<div class="theme dark-red"></div>
|
Dark green
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #314A32 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #314A32 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #314A32 |
| 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 |
| Implementation |
<div class="theme dark-green"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #AD0000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #7A0000 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Implementation |
<div class="theme dark-redbutton"></div>
|
MFRI Beauty white background beauty text and border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #B89A92 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #BB9E92 |
| Border | #BB9E92 |
| Secondary button | |
|---|---|
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #BB9E95 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #BB9E92 |
| Border | #BB9E92 |
| Focus outline | #BB9E95 |
| Implementation |
<div class="theme theme-mbwbbtbb"></div>
|
MFRI Beauty beauty background white text and boarder
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #B89A92 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #B89A92 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mbbbwtwb"></div>
|
MFRI Beauty Grey
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| Background | #51534A |
| Border | #FFFFFF |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #51534A |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | #FFFFFF |
| Border | #51534A |
| Secondary button hover | |
| Foreground | currentColor |
| Background | #51534A |
| Border | #51534A |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mbg"></div>
|
MFRI Beauty white background beauty text and white border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #B89A92 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #B89A92 |
| Border | #FFFFFF |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mbwbbtwb"></div>
|
MFRI Beauty beauty background white text and beauty boarder
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #B89A92 |
| Border | #B89A92 |
| Primary button hover | |
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #B89A92 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #B89A92 |
| Border | #B89A92 |
| Secondary button hover | |
| Foreground | #B89A92 |
| Background | #FFFFFF |
| Border | #B89A92 |
| Focus outline | #B89A92 |
| Implementation |
<div class="theme theme-new"></div>
|
MFRI Fresh white background fresh text and border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #163C35 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #163C35 |
| Secondary button | |
|---|---|
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #163C35 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #163C35 |
| Focus outline | #163C35 |
| Implementation |
<div class="theme theme-mfwbftfb"></div>
|
MFRI Fresh Fresh background white text and boarder
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mffbwtwb"></div>
|
MFRI Fresh white background Fresh text and white border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #FFFFFF |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mfwbftwb"></div>
|
MFRI Fresh Fresh background white text and fresh boarder
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #163C35 |
| Border | #163C35 |
| Primary button hover | |
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #163C35 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #163C35 |
| Border | #163C35 |
| Secondary button hover | |
| Foreground | #163C35 |
| Background | #FFFFFF |
| Border | #163C35 |
| Focus outline | #163C35 |
| Implementation |
<div class="theme theme-mffbwtfb"></div>
|
MFRI combine white background grey text and border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #D0CECE |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #D0CECE |
| Secondary button | |
|---|---|
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #D0CECE |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #D0CECE |
| Focus outline | #D0CECE |
| Implementation |
<div class="theme theme-mcwbgtgb"></div>
|
MFRI Combine Grey background white text and boarder
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mcgbwtwb"></div>
|
MFRI Combine white background Grey text and white border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #FFFFFF |
| Focus outline | #FFFFFF |
| Implementation |
<div class="theme theme-mcwbgtwb"></div>
|
MFRI Combine Grey background white text and Grey boarder
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #D0CECE |
| Border | #D0CECE |
| Primary button hover | |
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #D0CECE |
| Secondary button | |
|---|---|
| Foreground | #D0CECE |
| Background | #D0CECE |
| Border | #D0CECE |
| Secondary button hover | |
| Foreground | #D0CECE |
| Background | #FFFFFF |
| Border | #D0CECE |
| Focus outline | #D0CECE |
| Implementation |
<div class="theme theme-mfgbwtgb"></div>
|
JFS
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFA1C0 |
| Background | #FFFFFF |
| Border | #4F4F4F |
| Primary button hover | |
| Foreground | #FFA1C0 |
| Background | hsl(0, 0%, 85%) |
| Border | #4F4F4F |
| Secondary button | |
|---|---|
| Foreground | #E62E77 |
| Background | #CCCCCC |
| Border | #121011 |
| Secondary button hover | |
| Foreground | #E62E77 |
| Background | hsl(0, 0%, 85%) |
| Border | #121011 |
| Focus outline | #EB0E49 |
| Implementation |
<div class="theme theme-jfs"></div>
|
TPL
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #1333ED |
| Background | #FFFFFF |
| Border | #1333ED |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #1333ED |
| Border | #1333ED |
| Secondary button | |
|---|---|
| Foreground | #ED0543 |
| Background | #FFFFFF |
| Border | #ED0543 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #ED0543 |
| Border | #ED0543 |
| Focus outline | #1333ED |
| Implementation |
<div class="theme theme-tplwork"></div>
|
yk
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #1C1CBA |
| Background | #FFFFFF |
| Border | #302F2F |
| Primary button hover | |
| Foreground | #6EFFFA |
| Background | #82FF69 |
| Border | #7D8EFF |
| Secondary button | |
|---|---|
| Foreground | #332712 |
| Background | #CCCCCC |
| Border | #662933 |
| Secondary button hover | |
| Foreground | #332712 |
| Background | hsl(0, 0%, 85%) |
| Border | #662933 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-yk"></div>
|
TI
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00B676 |
| Border | #401F15 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(158.9, 100%, 40%) |
| Border | #401F15 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #95CD00 |
| Border | #401F15 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(76.39, 100%, 85%) |
| Border | #401F15 |
| Focus outline | #FF778D |
| Implementation |
<div class="theme theme-ti"></div>
|
REA
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| 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 |
| Implementation |
<div class="theme theme-rea"></div>
|
Nel
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #5A8099 |
| Background | #A6417A |
| Border | #72968D |
| Primary button hover | |
| Foreground | #5A8099 |
| Background | hsl(326.14, 44%, 40%) |
| Border | #72968D |
| Secondary button | |
|---|---|
| Foreground | #86B339 |
| Background | #B0AB21 |
| Border | #72739C |
| Secondary button hover | |
| Foreground | #86B339 |
| Background | hsl(57.9, 68%, 85%) |
| Border | #72739C |
| Focus outline | #7244F2 |
| Implementation |
<div class="theme theme-nel"></div>
|
Rochelle
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 |
| Implementation |
<div class="theme theme-ro"></div>
|
Beauty Header
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #EDA897 |
| Border | #EDA897 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(11.86, 70%, 85%) |
| Border | #EDA897 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #F5D0D7 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(348.65, 65%, 85%) |
| Border | transparent |
| Focus outline | #F5D0D7 |
| Implementation |
<div class="theme beautyheader"></div>
|
Arigato Rewards
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #F9F9F9 |
| Background | #F5333F |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #F9F9F9 |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #F9F9F9 |
| 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 |
| Implementation |
<div class="theme arigato-rewards"></div>
|