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 | #333333 |
| Background | #FFFFFF |
| 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 light"></div>
|
Theme dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #363636 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #363636 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #363636 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #363636 |
| Background | #F7F7F7 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #363636 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark"></div>
|
Theme grey bkground black text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F5F5F5 |
| 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 grey"></div>
|
Theme Green bkground white text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #63C677 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #63C677 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #63C677 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #F70D05 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #F70D05 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme green"></div>
|
Theme Dark Green bkground white text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #41A072 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #41A072 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #41A072 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| 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 darkgreen"></div>
|
Theme Grey bkground black text green button
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #EEEEEE |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #63C677 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(132.12, 46%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme greybackground"></div>
|
Thee red
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E84855 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #11BF23 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #1A7813 |
| 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-red"></div>
|
Theme Dark Green bkground white text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #41A072 |
| Accent | currentColor |
| Border | #50C877 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #50C877 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #41A072 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| 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 darkgreenwithborder"></div>
|
Theme dark2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #363636 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #363636 |
| Background | #F7F7F7 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #363636 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark2"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2E634E |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2E634E |
| Border | #2E634E |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(156.23, 37%, 40%) |
| Border | #2E634E |
| 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 darkgreen-button"></div>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E84855 |
| Border | #E84855 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(355.12, 78%, 40%) |
| Border | #E84855 |
| Secondary button | |
|---|---|
| Foreground | #363636 |
| Background | #F7F7F7 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #363636 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme transparent-red-button"></div>
|
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | transparent |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #363636 |
| Background | #F7F7F7 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #363636 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme transparent-whitebutton"></div>
|
Theme light with 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 | #787878 |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme lightwithborder"></div>
|