Themes
Take full control of all the colors
Basis
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #3E2B1D |
| Background | #F6F4F1 |
| Accent | #825F48 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | #DED8D3 |
| Border | #DED8D3 |
| Primary button hover | |
| Foreground | #3E2B1D |
| Background | hsl(27,27, 14%, 85%) |
| Border | #BEB6AF |
| Secondary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | transparent |
| Border | #BEB6AF |
| Secondary button hover | |
| Foreground | #3E2B1D |
| Background | #DED8D3 |
| Border | #DED8D3 |
| Link button | |
|---|---|
| Link color | #3E2B1D |
| Link button hover | |
| Link hover color | hsl(25,45, 36%, 40%) |
| Implementation |
<div class="theme cerama-basis"></div>
|
Basis alternate
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #3E2B1D |
| Background | #DED8D3 |
| Accent | #825F48 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | transparent |
| Border | #BEB6AF |
| Primary button hover | |
| Foreground | #3E2B1D |
| Background | #BEB6AF |
| Border | #BEB6AF |
| Secondary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | #BEB6AF |
| Border | #BEB6AF |
| Secondary button hover | |
| Foreground | #3E2B1D |
| Background | hsl(28, 10%, 85%) |
| Border | #BEB6AF |
| Link button | |
|---|---|
| Link color | #3E2B1D |
| Link button hover | |
| Link hover color | hsl(25,45, 36%, 40%) |
| Implementation |
<div class="theme cerama-basis-alternate"></div>
|
Brown light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #825F48 |
| Accent | #E0D7D1 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #3E2B1D |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Implementation |
<div class="theme cerama-brown-light"></div>
|
Brown dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3E2B1D |
| Accent | #CEC9C6 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #CDC6BC |
| Primary button hover | |
| Foreground | #3E2B1D |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Implementation |
<div class="theme cerama-brown-dark"></div>
|
Green dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #084538 |
| Accent | #FF6644 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FF6644 |
| Background | transparent |
| Border | #FF6644 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #FF6644 |
| Border | #FF6644 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FF6644 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Implementation |
<div class="theme cerama-green-dark"></div>
|
Transparent (header)
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #3E2B1D |
| Background | #DED8D3 |
| Accent | #DED8D3 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | #DED8D3 |
| Border | #DED8D3 |
| Primary button hover | |
| Foreground | #3E2B1D |
| Background | hsl(27,27, 14%, 85%) |
| Border | #BEB6AF |
| Secondary button | |
|---|---|
| Foreground | #3E2B1D |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | #3E2B1D |
| Background | #DED8D3 |
| Border | #DED8D3 |
| Link button | |
|---|---|
| Link color | #DED8D3 |
| Link button hover | |
| Link hover color | hsl(27,27, 14%, 85%) |
| Implementation |
<div class="theme cerama-transparent"></div>
|