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 | #205753 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme white"></div>
|
Beige
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #205753 |
| Background | #EDE4DF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme beige"></div>
|
Light Green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #205753 |
| Background | #91BCA1 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-green"></div>
|
Light Green white text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #91BCA1 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-green-white-text"></div>
|
Blue Green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #205753 |
| Background | #689C98 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme blue-green"></div>
|
Blue Green white text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #689C98 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme blue-green-white-text"></div>
|
Deep Green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #91BCA1 |
| Background | #205753 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #91BCA1 |
| Background | transparent |
| Border | #91BCA1 |
| Secondary button hover | |
| Foreground | #205753 |
| Background | #91BCA1 |
| Border | #91BCA1 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme deep-green"></div>
|
Deep Green white text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #205753 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme deep-green-white-text"></div>
|
Orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #CF6648 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme orange"></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 | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #112D2B |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| 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 | #205753 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-transparent"></div>
|
Wintergreen (kun til Innovationsområde)
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #598A7A |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme winter-green"></div>
|
Myrtle Green (kun til innovationsområder)
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #447A76 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CF6648 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #C15233 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme myrtle-green"></div>
|
Terre Cotta (kun til innovationsområder)
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #DC7868 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #CF6648 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme terre-cotta"></div>
|
Coral
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E88A87 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #205753 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #112D2B |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #CF6648 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme coral"></div>
|