Themes
Take full control of all the colors
Theme light
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 | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-light"></div>
|
Theme black
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #34A245 |
| Background | transparent |
| Border | #34A245 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #34A245 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-black"></div>
|
Theme yellow
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FEFED2 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 yellow"></div>
|
Theme yellow2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FBF08F |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 yellow2"></div>
|
Theme brown
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #E4DBD4 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 brown"></div>
|
Theme rose
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FEE4E3 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 rose"></div>
|
Theme black with border
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #34A245 |
| Background | transparent |
| Border | #34A245 |
| Primary button hover | |
| Foreground | #34A245 |
| Background | transparent |
| Border | #34A245 |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 blackwithborder"></div>
|
Theme green2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #DEEBDD |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 green2"></div>
|
Theme green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #B4D3B2 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 green"></div>
|
Theme grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #E0E0E0 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #34A245 |
| Background | transparent |
| Border | #34A245 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #34A245 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-grey"></div>
|
Theme transparent with border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | #000000 |
| Border | #000000 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 transparentwithborder"></div>
|
Theme red
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFECEC |
| Accent | #000000 |
| 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 | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 red"></div>
|
Theme blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #B9D3DC |
| Accent | #000000 |
| 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 | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 blue"></div>
|
Theme turkis
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #99C5C4 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 turkis"></div>
|
Theme orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFDFBF |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 orange"></div>
|
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Border | #000000 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme tagbuttons"></div>
|
Theme rose2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFF2E6 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-rose2"></div>
|
Theme lightwithborder
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #000000 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-lightwithborder"></div>
|
Theme violet
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #F0EDF4 |
| Accent | #000000 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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 violet"></div>
|
Theme with uppercase
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #1322F2 |
| Background | #FF82FB |
| Accent | #F5EB5B |
| 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-uppercasetest"></div>
|
Theme with uppercase2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #11F254 |
| Background | #7D69FF |
| Accent | #F55E38 |
| 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-uppercasetest2"></div>
|