Themes
Take full control of all the colors
Light grey
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 | #006BA6 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00587C |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #006BA6 |
| Background | transparent |
| Border | #006BA6 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | #006BA6 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme lightgrey"></div>
|
Light grey (blue header)
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #006BA6 |
| Background | #F7F7F7 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00587C |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #006BA6 |
| Background | transparent |
| Border | #006BA6 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | #006BA6 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-grey-header"></div>
|
White
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00587C |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #006BA6 |
| Background | transparent |
| Border | #006BA6 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | #006BA6 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme white"></div>
|
White (blue header)
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #006BA6 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00587C |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #006BA6 |
| Background | transparent |
| Border | #006BA6 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | #006BA6 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme white-header"></div>
|
bright Blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #64B4E6 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #00587C |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme bright-blue"></div>
|
Blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #00587C |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme blue"></div>
|
Dark blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #00587C |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #00587C |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-blue"></div>
|
Light 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 | #FFFFFF |
| Primary button hover | |
| Foreground | #00587C |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| 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 | #333333 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #00587C |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #006BA6 |
| Background | transparent |
| Border | #006BA6 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #006BA6 |
| Border | #006BA6 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-transparent"></div>
|