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 | #1F301A |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | currentColor |
| Background | #D1D1D1 |
| Border | transparent |
| Secondary button hover | |
| Foreground | currentColor |
| 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 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 | #000000 |
| 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 | #FFFFFF |
| Background | #000000 |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-dark"></div>
|
Theme grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333333 |
| Background | #F7F7F7 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| 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 grey"></div>
|
Theme light background transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| 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 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 | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #191919 |
| Primary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | #191919 |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #333333 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme darktransparent"></div>
|
Theme transparent
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | currentColor |
| Background | transparent |
| Border | transparent |
| Primary button hover | |
| Foreground | currentColor |
| Background | transparent |
| 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 transparent"></div>
|
Theme dark green
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1F301A |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #1F301A |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #1F301A |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #828282 |
| Background | #CCCCCC |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #828282 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme darkgreen"></div>
|
Theme olive
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #6D6225 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #615721 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(50.62, 49%, 40%) |
| Border | #FFFFFF |
| 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 | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme olive"></div>
|
Theme White font
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #000000 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| 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 whitefont"></div>
|
Rainbow
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #A30AC2 |
| Background | #FF4F7E |
| Accent | currentColor |
| Border | #392BFF |
| Primary button | |
|---|---|
| Foreground | #369C3A |
| Background | #34EBF0 |
| Border | #FF2908 |
| Primary button hover | |
| Foreground | #F5853B |
| Background | #E1ED3E |
| Border | #B8B8B8 |
| Secondary button | |
|---|---|
| Foreground | #D7A4ED |
| Background | #9BCCA3 |
| Border | #FFBFC8 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #6C8F72 |
| Border | #415745 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-new"></div>
|
Theme light with border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #1F301A |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | #B3B3B3 |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #FFFFFF |
| 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 theme-light-with-border"></div>
|
Theme blue
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #476491 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #476491 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #476491 |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | transparent |
| Secondary button hover | |
| Foreground | #000000 |
| 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>
|
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #277D15 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #277D15 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #E0E0E0 |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #A4A82F |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | #E0E0E0 |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-cookie"></div>
|
Theme dark green with border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #57634B |
| Accent | currentColor |
| Border | #FFFFFF |
| Primary button | |
|---|---|
| Foreground | #57634B |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #000000 |
| Background | #DBDBDB |
| Border | #73B361 |
| Secondary button | |
|---|---|
| Foreground | #000000 |
| Background | #FFFFFF |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #000000 |
| Background | #E0E0E0 |
| Border | #FFFFFF |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme darkgreenwithborder"></div>
|
Theme olivetext
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #6D6225 |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #615721 |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(50.62, 49%, 40%) |
| Border | #FFFFFF |
| 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 | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme olivetext"></div>
|
Theme dark green font
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #4D664B |
| Background | transparent |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #4D664B |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(115.56, 15%, 40%) |
| Border | #FFFFFF |
| 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 darkgreenfont"></div>
|
| Base | |
|---|---|
| Foreground | #1F301A |
| Background | #FFFFFF |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #1F301A |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(106.36, 30%, 40%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #CCCCCC |
| Border | #FFFFFF |
| Secondary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 85%) |
| Border | #FFFFFF |
| Focus outline | #CCCCCC |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #CCCCCC |
| Implementation |
<div class="theme theme-lightwithredbutton"></div>
|
Theme light brown
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #504139 |
| Background | #EBE3D8 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #EBE3D8 |
| Background | #504139 |
| Border | transparent |
| Primary button hover | |
| Foreground | #EBE3D8 |
| Background | hsl(20.87, 17%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #504139 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #504139 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #DBDBDB |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #DBDBDB |
| Implementation |
<div class="theme themelightbrown"></div>
|
| Base | |
|---|---|
| Foreground | #FFFEF8 |
| Background | #504139 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFEF8 |
| Background | #504139 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFEF8 |
| Background | hsl(20.87, 17%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #CCCCCC |
| Background | #000000 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #CCCCCC |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Focus outline | #DBDBDB |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #DBDBDB |
| Implementation |
<div class="theme themedarkbrownnobutton"></div>
|
Theme yellow1
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #504139 |
| Background | #FFFEF8 |
| Accent | currentColor |
| Border | #FFFEF8 |
| Primary button | |
|---|---|
| Foreground | #504139 |
| Background | #FFFEF8 |
| Border | #504139 |
| Primary button hover | |
| Foreground | #504139 |
| Background | hsl(51.43, 100%, 85%) |
| Border | #504139 |
| Secondary button | |
|---|---|
| Foreground | #CCCCCC |
| Background | #000000 |
| Border | #CCCCCC |
| Secondary button hover | |
| Foreground | #CCCCCC |
| Background | hsl(0, 0%, 40%) |
| Border | #CCCCCC |
| Focus outline | #DBDBDB |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #DBDBDB |
| Implementation |
<div class="theme themeyellow1"></div>
|
Theme dark brown with light brown text
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #938A82 |
| Background | #504139 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #938A82 |
| Background | #504139 |
| Border | transparent |
| Primary button hover | |
| Foreground | #938A82 |
| Background | hsl(20.87, 17%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #504139 |
| Background | #938A82 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #504139 |
| Background | hsl(28.24, 7.000000000000001%, 40%) |
| Border | transparent |
| Focus outline | #DBDBDB |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #DBDBDB |
| Implementation |
<div class="theme darkbrownwithlightbrowntext"></div>
|
| Base | |
|---|---|
| Foreground | #504139 |
| Background | #EBE3D8 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #504139 |
| Background | #EBE3D8 |
| Border | transparent |
| Primary button hover | |
| Foreground | #504139 |
| Background | hsl(34.74, 32%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #504139 |
| Background | #EBE3D8 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #504139 |
| Background | hsl(34.74, 32%, 85%) |
| Border | transparent |
| Focus outline | #DBDBDB |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Focus outline | #DBDBDB |
| Implementation |
<div class="theme themelightbrownnobuttons"></div>
|
darkgreen
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #57634B |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #57624B |
| Border | #FFFFFF |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(88.7, 13%, 40%) |
| Border | #FFFFFF |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-darkgreen"></div>
|
Background grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #3E3D3D |
| Background | #E9E9E2 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme background-grey"></div>
|
Theme orange
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E6B53F |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E6B53F |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #E6B53F |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #CCCCCC |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme theme-orange"></div>
|
Theme light brown2
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #504139 |
| Background | #EBE3D8 |
| Accent | #333333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #EBE3D8 |
| Background | #504139 |
| Border | transparent |
| Primary button hover | |
| Foreground | #EBE3D8 |
| Background | hsl(20.87, 17%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #504139 |
| Background | #CCCCCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #504139 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #DBDBDB |
| Link button | |
|---|---|
| Link color | #333333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #DBDBDB |
| Implementation |
<div class="theme themelightbrown2"></div>
|
Theme dark grey
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #6E6E6E |
| Background | #383838 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #333333 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(0, 0%, 40%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #6E6E6E |
| Background | #383838 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #6E6E6E |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme darkgrey"></div>
|
Copy Rainbow
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #57634B |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #57634B |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #F5853B |
| Background | #E1ED3E |
| Border | #B8B8B8 |
| Secondary button | |
|---|---|
| Foreground | #D7A4ED |
| Background | #9BCCA3 |
| Border | #FFBFC8 |
| Secondary button hover | |
| Foreground | #333333 |
| Background | #6C8F72 |
| Border | #415745 |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme copyrainbow"></div>
|
Theme dark grey Border
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #898E93 |
| Accent | currentColor |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFFFFF |
| Background | #898E93 |
| Border | #000000 |
| Primary button hover | |
| Foreground | #FFFFFF |
| Background | hsl(210, 4%, 40%) |
| Border | #000000 |
| Secondary button | |
|---|---|
| Foreground | #6E6E6E |
| Background | #383838 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #6E6E6E |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme darkgreyborder"></div>
|
Theme dark greyWhiteFont
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 | #343A40 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #343A40 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #6E6E6E |
| Background | #383838 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #6E6E6E |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme darkgreywhitefont"></div>
|
Theme dark greyWhiteFontBorder
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #FFFFFF |
| Background | #343A40 |
| Accent | currentColor |
| Border | #B3B3B3 |
| Primary button | |
|---|---|
| Foreground | #343A40 |
| Background | #FFFFFF |
| Border | transparent |
| Primary button hover | |
| Foreground | #343A40 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #6E6E6E |
| Background | #383838 |
| Border | transparent |
| Secondary button hover | |
| Foreground | #6E6E6E |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Link button | |
|---|---|
| Link color | currentColor |
| Link button hover | |
| Link hover color | currentColor |
| Implementation |
<div class="theme darkgreywhitefontborder"></div>
|
BlackAccent Testing
This is the body text of the theme.
This is the accent color of the theme.
| Base | |
|---|---|
| Foreground | #333 |
| Background | #fff |
| Accent | #333 |
| Border | transparent |
| Primary button | |
|---|---|
| Foreground | #FFF |
| Background | #333 |
| Border | transparent |
| Primary button hover | |
| Foreground | #FFF |
| Background | hsl(0, 0%, 40%) |
| Border | transparent |
| Secondary button | |
|---|---|
| Foreground | #333 |
| Background | #CCC |
| Border | transparent |
| Secondary button hover | |
| Foreground | #333 |
| Background | hsl(0, 0%, 85%) |
| Border | transparent |
| Focus outline | #cccccc |
| Link button | |
|---|---|
| Link color | #333 |
| Link button hover | |
| Link hover color | hsl(0, 0%, 40%) |
| Focus outline | #cccccc |
| Implementation |
<div class="theme theme-new"></div>
|