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 | #333333 |
| Background | #FFFFFF |
| 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 | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #E6E6E6 |
| Border | #E6E6E6 |
| 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 light"></div>
|
Theme dark
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #212529 |
| 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 gray
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #ECECEC |
| 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 gray"></div>
|
Theme Yellow
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #EFBD2D |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #EFBD2D |
| Border | #000000 |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(44.54, 86%, 85%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| 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 yellow"></div>
|
Theme Yellow light
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #EFBD2D |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #EFBD2D |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(44.54, 86%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| 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 yellowlight"></div>
|
Theme Red
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F94410 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #F94410 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #F94410 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 red"></div>
|
Theme Blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #3B77AA |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3B77AA |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #3B77AA |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| 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 blue"></div>
|
Theme light background transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| 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 lightbackgroundtransparent"></div>
|
Theme dark transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Accent | #333333 |
| 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 | #FFFFFF |
| 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 darktransparent"></div>
|
Theme lilla
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #6328E0 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #6328E0 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #6328E0 |
| 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 lilla"></div>
|
Theme darkgrey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #DEDEDE |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3530CF |
| Background | transparent |
| Border | #333333 |
| Primary button hover | |
| Foreground | #3530CF |
| Background | transparent |
| Border | #333333 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| 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 darkgrey"></div>
|
Transparent with border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #333333 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | #333333 |
| 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 transparentwithborder"></div>
|
Theme darkgrey2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #DEDEDE |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #3530CF |
| Background | #C9C9C9 |
| Border | #C9C9C9 |
| Primary button hover | |
| Foreground | #3530CF |
| Background | hsl(0, 0%, 85%) |
| Border | #C9C9C9 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| 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 darkgrey2"></div>
|
Transparent test
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| 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 transparenttest"></div>
|
Theme red2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #B4100D |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #000000 |
| Background | hsl(0, 0%, 85%) |
| 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-red2"></div>
|
Theme orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #D85B34 |
| 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-orange"></div>
|
Theme purple
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #BF4C91 |
| Accent | #FFFFFF |
| 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 | #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-purple"></div>
|
Theme Yellow2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #E9E151 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #333333 |
| Border | #333333 |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 40%) |
| Border | #333333 |
| 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 yellow2"></div>
|
Theme Yellow light2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F7F4C1 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #333333 |
| Border | #333333 |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 40%) |
| Border | #333333 |
| 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 yellowlight2"></div>
|
Theme blue2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #0057BA |
| Accent | #FFFFFF |
| 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 blue2"></div>
|
Theme dark blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #003470 |
| Accent | #FFFFFF |
| 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 darkblue"></div>
|
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #333333 |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | #333333 |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #333333 |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #333333 |
| 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 themeforfacetbuttons"></div>
|
Theme light with orange button
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F64F00 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(19.27, 100%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #E6E6E6 |
| Border | #E6E6E6 |
| 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 lightwithorange"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F64F00 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(19.27, 100%, 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 graywithorangebutton"></div>
|
Theme dark purple
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #462E6C |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| 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 | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme darkpurple"></div>
|
Theme purple
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #754BB3 |
| Accent | #FFFFFF |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | transparent |
| Border | #FFFFFF |
| 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 | #FFFFFF |
| Link button hover | |
| Link hover color | hsl(0, 0%, 85%) |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme purple"></div>
|
| Base | |
|---|---|
| Foreground | #000000 |
| Background | transparent |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4D4D4D |
| Border | #333333 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #333333 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #333333 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | #333333 |
| 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 buttons"></div>
|
Theme black
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Accent | #FFFFFF |
| 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 |
| 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 black"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #F27638 |
| Border | #333333 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(20, 88%, 40%) |
| Border | #333333 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #12F7FF |
| Border | #333333 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(182.03, 100%, 85%) |
| Border | #333333 |
| 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 buttons2"></div>
|
| Base | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Accent | #333333 |
| Border | #CCCCCC |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | #333333 |
| Background | transparent |
| 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 lightwithbordertransparentbutton"></div>
|