Themes
Take full control of all the colors
orange & dark txt / orange bt / white-bg
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #E87722 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #4C4C4C |
| Background | #DBDBDB |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Link button | |
|---|---|
| Link color | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Implementation |
<div class="theme geveko-orange-title-orange-bt-white-fg"></div>
|
orange txt no bg / light grey bt + orange bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #E87722 |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #4C4C4C |
| Background | #DBDBDB |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #4C4C4C |
| Background | #DBDBDB |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme geveko-no-bg-dark-gray-btn"></div>
|
orange text gray bg / orange bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #E87722 |
| Background | #A6A6A6 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #E8A66D |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #A6A6A6 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme gm-orange-title-bt-gray-transparent-bg"></div>
|
Dark txt white bg / orange bt and border
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #4C4C4C |
| Background | transparent |
| Accent | currentColor |
| Border | #E87722 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #4C4C4C |
| Background | #DBDBDB |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark-txt-orange-border"></div>
|
Dark txt white bg / orange bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #4C4C4C |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #4C4C4C |
| Background | #DBDBDB |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light-transparent"></div>
|
Dark txt & light grey2 bg / orange bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #4C4C4C |
| Background | #DBDBDB |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #E87722 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #4C4C4C |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #4C4C4C |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme geveko-black-text-orange--title-bt-white-bg"></div>
|
White txt dark grey bg orange bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(25,76, 81%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #4C4C4C |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #4C4C4C |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme geveko-grey"></div>
|
white txt orange bg / dark gray bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #E87722 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #E87722 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme geveko-orange"></div>
|
white txt light grey bg / dark grey bt
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #4C4C4C |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #4C4C4C |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme geveko-light-grey"></div>
|
Gray border
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #EBEBEB |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(25,76, 81%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #EAEAEA |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-gray-border"></div>
|
White txt only
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(25,76, 81%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme white-txt-only"></div>
|
Light
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #545454 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | #000000 |
| Secondary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| Border | #000000 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme light"></div>
|
Dark
This is the body text of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4C4C4C |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E87722 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #262626 |
| Border | #262626 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #262626 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark"></div>
|