Themes
Take full control of all the colors
Theme light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Accent | #171718 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFBA3F |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(38.44, 100%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme light"></div>
|
Theme dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #343A40 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme dark"></div>
|
Theme grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #171718 |
| Background | #F6F5F5 |
| Accent | #171718 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFBA3F |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(38.44, 100%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | transparent |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | transparent |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme grey"></div>
|
Theme light with border
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | transparent |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme lightwithborder"></div>
|
Theme yellow
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFBA3F |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-new"></div>
|
Theme transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #522300 |
| Background | transparent |
| Accent | #DB7A00 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFBA3F |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(38.44, 100%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #CCCCCC |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme transparent"></div>
|
Theme light with border2
This is the body text of the theme.
This is the accent color of the theme.
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme lightwithborder2"></div>
|
Theme light yellow accent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Accent | #FFBA3F |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFBA3F |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(38.44, 100%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme lightyellowaccent"></div>
|
Theme light greenaccent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Accent | #40C057 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFBA3F |
| Border | transparent |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(38.44, 100%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme lightgreenaccent"></div>
|
Theme light2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Accent | #171718 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFAEB |
| Border | #FF9900 |
| Primary button hover | |
| Foreground | #171718 |
| Background | hsl(45, 100%, 85%) |
| Border | #FF9900 |
| Secondary button | |
|---|---|
| Foreground | #171718 |
| Background | #FFFFFF |
| Border | #171718 |
| Secondary button hover | |
| Foreground | #171718 |
| Background | hsl(0, 0%, 85%) |
| Border | #171718 |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | #228BE6 |
| Link button hover | |
| Link hover color | hsl(207.86, 80%, 40%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme light1"></div>
|