Themes
Take full control of all the colors
No theme
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| 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 no-theme"></div>
|
Light accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFD522 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| 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 light-accent"></div>
|
Light transparant
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFD522 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme light-transparant"></div>
|
Dark background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #27292A |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #27292A |
| Background | #FFD522 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFD522 |
| Background | transparent |
| Border | #FFD522 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme dark-background"></div>
|
Light background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #E6E6E6 |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFD522 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #27292A |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(200, 4%, 40%) |
| 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 light-background"></div>
|
Black background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFD522 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFD522 |
| Background | transparent |
| Border | #FFD522 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme black-background"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F5F5F5 |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #6B7073 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| 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 light-background-grey-button"></div>
|
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #6B7073 |
| Border | #333333 |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| Border | #333333 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | #333333 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | #333333 |
| 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 light-background-sidebar"></div>
|
Dark transparant
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | #FFD522 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFD522 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFD522 |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme dark-transparant"></div>
|