Themes
Take full control of all the colors
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 | #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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light"></div>
|
Dark-red
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #AD0000 |
| Accent | currentColor |
| 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-red"></div>
|
Yellow-orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFCB1F |
| Accent | currentColor |
| 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme yellow-orange"></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 | 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 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 | 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| 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 | #FFFFFF |
| 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>
|
Theme paletaupe
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #C79F81 |
| Accent | currentColor |
| 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-paletaupe"></div>
|
Theme khaki
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #BEBF9F |
| Accent | currentColor |
| 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-khaki"></div>
|
Theme palegold
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #DEC492 |
| Accent | currentColor |
| 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 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-palegold"></div>
|
Transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFF70 |
| Accent | currentColor |
| Border | #991814 |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Border | #70120F |
| Primary button hover | |
| Foreground | #333333 |
| Background | transparent |
| Border | #B81E19 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Border | #365EFF |
| Secondary button hover | |
| Foreground | #333333 |
| Background | transparent |
| Border | #365EFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-transparent"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F37033 |
| Border | #F37033 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #E6520E |
| Border | #E6520E |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #F37033 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #F37033 |
| Implementation |
<div class="theme theme-black-on-white-orange-buttons"></div>
|
Orange-on-white
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #F37033 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #F37033 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #F37033 |
| Background | #E6520E |
| Border | #E6520E |
| Secondary button | |
|---|---|
| Foreground | #F37033 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #F37033 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Focus outline | #F37033 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #F37033 |
| Implementation |
<div class="theme theme-orange-on-white"></div>
|
white-on-orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F37033 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #F37033 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #E6520E |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #F37033 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #F37033 |
| Implementation |
<div class="theme theme-white-on-orange"></div>
|
Orange-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 | #FFFFFF |
| Background | #F37033 |
| Border | #F37033 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #E6520E |
| Border | #E6520E |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #BFBFBF |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-orange-black"></div>
|
White-on-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 | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| 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 theme-white-on-black"></div>
|
Orange-on-transparent
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 | #FFFFFF |
| Background | #F37033 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #E6520E |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme orange-on-transparent"></div>
|
Black-White-OrangeBorder
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #F37033 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F37033 |
| Border | #F37033 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #E6520E |
| Border | #E6520E |
| 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 theme-black-white-orangeborder"></div>
|
orange-on-transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #F37033 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F37033 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(19,06, 89%, 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 theme-orange-on-transparent"></div>
|
dark-blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #252E3E |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #012622 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #012622 |
| 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 dark-green-color"></div>
|
dusty-blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #2D3546 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #8FBFE0 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #8FBFE0 |
| 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 dusty-blue"></div>
|
deep-dark-blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #A7B0BF |
| Background | #1F2634 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #252E3E |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #252E3E |
| 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 deep-dark-blue"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #7A9694 |
| Border | #7A9694 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #6C8583 |
| Border | #6C8583 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #7A9694 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #F5F5F5 |
| Border | #7A9694 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-black-on-white-green-buttons"></div>
|
Theme green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #7A9694 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #CCCCCC |
| Border | #CCCCCC |
| Secondary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| Border | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-green"></div>
|
Light gray - Green
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 | #7A9694 |
| Border | #7A9694 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #6C8583 |
| Border | #6C8583 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #7A9694 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #F5F5F5 |
| Border | #7A9694 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gray-green"></div>
|
Green-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 | #FFFFFF |
| Background | #7A9694 |
| Border | #7A9694 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #6C8583 |
| Border | #6C8583 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #BFBFBF |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-green-black"></div>
|