Themes
Take full control of all the colors
Light
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | #FFFFFF |
| 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 |
| Implementation |
<div class="theme light"></div>
|
Dark
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #262626 |
| 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 |
| Implementation |
<div class="theme dark"></div>
|
Light transparent
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #262626 |
| Background | transparent |
| 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 |
| Implementation |
<div class="theme light-transparent"></div>
|
Dark transparent
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #003A67 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #0168B5 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0168B5 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #003A67 |
| Border | transparent |
| Implementation |
<div class="theme dark-transparent"></div>
|
Light blue
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #003A67 |
| Background | #F7F7F9 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #F7F7F9 |
| Background | #003A67 |
| Border | transparent |
| Primary button hover | |
| Foreground | #F7F7F9 |
| Background | #0168B5 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #F7F7F9 |
| Background | #0168B5 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #F7F7F9 |
| Background | #003A67 |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme dark-green"></div>
|
Blue and White border
This is the body text of the theme.
| Primary button | |
|---|---|
| Foreground | #0168B5 |
| Background | #FFFFFF |
| Border | #0168B5 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #0168B5 |
| Border | #0168B5 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Implementation |
<div class="theme blue-white-border"></div>
|
Blue and White
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0168B5 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #0168B5 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #0168B5 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0168B5 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(205,67, 99%, 40%) |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme blue-white"></div>
|