Themes
Take full control of all the colors
General
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | inherit |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | #9751FF |
| 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-general"></div>
|
Gray Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F9F9F9 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Primary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gray-background"></div>
|
Dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #020437 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #020437 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #020437 |
| 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>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #020437 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Primary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Link button | |
|---|---|
| Link color | #7E7F95 |
| Link button hover | |
| Link hover color | hsl(237.39, 10%, 40%) |
| Implementation |
<div class="theme footer-bg"></div>
|
Card-Special
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #452BFF |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #452BFF |
| Background | #FFFFFF |
| Border | #452BFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | #9751FF |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | inherit |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | inherit |
| 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-new"></div>
|
Purple Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F5F0FF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | inherit |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | inherit |
| 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 purple-background"></div>
|
Transparent Background Light Text
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 | inherit |
| Background | inherit |
| Border | inherit |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme transparent-background-light-text"></div>
|
Dark Blue Background
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #020437 |
| Accent | #452BFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | inherit |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #9751FF |
| Border | inherit |
| 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-dark-blue-background"></div>
|
Card Gray
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F3F3F7 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| 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-card-gray"></div>
|
Gray Background With Accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F3F3F7 |
| Accent | #452BFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #452BFF |
| Border | inherit |
| Secondary button | |
|---|---|
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| Secondary button hover | |
| Foreground | inherit |
| Background | inherit |
| Border | inherit |
| 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-card-gray-with-accent"></div>
|