Themes
Take full control of all the colors
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0062AE |
| 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 | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme footer_banner"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme header_menu"></div>
|
Standard
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #191919 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0062AE |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00476B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #B70E0C |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #A50D0B |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme standard"></div>
|
bg_grey
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #E3E3E3 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0062AE |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00476B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme bg_grey"></div>
|
bg_dark
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3F3F3F |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0062AE |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00476B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Implementation |
<div class="theme bg_dark"></div>
|
bg_blue
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #191919 |
| Background | #E0EBF4 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0062AE |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00476B |
| 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 |
| Implementation |
<div class="theme bg_blue"></div>
|
H2
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #0062AE |
| 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 |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme h2"></div>
|