Themes
Take full control of all the colors
White
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #5E5E57 |
| Background | #FFFFFF |
| Accent | #0B2D2D |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1E4E4B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(176.25, 44%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #1E4E4B |
| Background | #FFFFFF |
| Border | #1E4E4B |
| Secondary button hover | |
| Foreground | #1E4E4B |
| Background | hsl(0, 0%, 85%) |
| Border | #1E4E4B |
| Focus outline | #8F5145 |
| Link button | |
|---|---|
| Link color | #082612 |
| Link button hover | |
| Link hover color | hsl(140, 65%, 40%) |
| Focus outline | #8F5145 |
| Implementation |
<div class="theme theme-white"></div>
|
Beige
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #272525 |
| Background | #D9D7C5 |
| Accent | #0B2D2D |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1E4E4B |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(176.25, 44%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #1E4E4B |
| Background | transparent |
| Border | #1E4E4B |
| Secondary button hover | |
| Foreground | #1E4E4B |
| Background | transparent |
| Border | #1E4E4B |
| Focus outline | #403E3B |
| Link button | |
|---|---|
| Link color | #272525 |
| Link button hover | |
| Link hover color | hsl(0, 3%, 40%) |
| Focus outline | #403E3B |
| Implementation |
<div class="theme theme-beige"></div>
|
Mørkegrøn
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0B2D2D |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #0B2D2D |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #0B2D2D |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #1BBA89 |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #1BBA89 |
| Implementation |
<div class="theme theme-darkgreen"></div>
|
Lysegrøn
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #082612 |
| Background | #1BBA89 |
| Accent | #082612 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #082612 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(140, 65%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #082612 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #082612 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #082612 |
| Link button hover | |
| Link hover color | hsl(140, 65%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-lightgreen"></div>
|
Grøn
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1E4E4B |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #1E4E4B |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #1E4E4B |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1E4E4B |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #1E4E4B |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-green"></div>
|
Brun
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #8F5145 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #8F5145 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #8F5145 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-brown"></div>
|