Themes
Light
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Accent | #333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #707B36 |
Border | #999999 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #95A447 |
Border | #999999 |
Secondary button | |
---|---|
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Secondary button hover | |
Foreground | #707B36 |
Background | hsl(0, 0%, 85%) |
Border | #707B36 |
Link button | |
---|---|
Link color | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme light"></div>
|
Dark
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Accent | #333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Link button | |
---|---|
Link color | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme dark"></div>
|
Light transparent
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | transparent |
Accent | #333 |
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 | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
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 | #FFFFFF |
Background | transparent |
Accent | #333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Primary button hover | |
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Secondary button hover | |
Foreground | #FFFFFF |
Background | transparent |
Border | transparent |
Link button | |
---|---|
Link color | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme dark-transparent"></div>
|
Light gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #F7F7F7 |
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 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme theme-gray"></div>
|
Black
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #0D0E10 |
Accent | currentColor |
Border | transparent |
Primary button | |
---|---|
Foreground | #0D0E10 |
Background | #FFFFFF |
Border | #FFFFFF |
Primary button hover | |
Foreground | #0D0E10 |
Background | hsl(0, 0%, 85%) |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #0D0E10 |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | hsl(220, 10%, 40%) |
Border | #FFFFFF |
Link button | |
---|---|
Link color | currentColor |
Link button hover | |
Link hover color | currentColor |
Implementation |
<div class="theme black"></div>
|
Gray border
This is the body text of the theme.
This is the accent color of the theme.
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 | #FFFFFF |
Border | transparent |
Secondary button hover | |
Foreground | #333333 |
Background | hsl(0, 0%, 85%) |
Border | transparent |
Link button | |
---|---|
Link color | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme theme-gray-border"></div>
|
Dark-Peach
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Accent | #333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #ED8A7A |
Border | #666666 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #D67C6D |
Border | #666666 |
Secondary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Link button | |
---|---|
Link color | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme dark-peach"></div>
|
neutral-gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #D7D7D7 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Secondary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #262626 |
Border | #262626 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme neutral-gray"></div>
|
Dark green
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #314A32 |
Accent | #333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #314A32 |
Background | #FFFFFF |
Border | transparent |
Primary button hover | |
Foreground | #314A32 |
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 | #333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Focus outline | #CCCCCC |
Implementation |
<div class="theme dark-green"></div>
|
Warm-Gray
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #8F8F8D |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #333333 |
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 warm-gray"></div>
|
Green background
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #95A447 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #555D28 |
Background | transparent |
Border | #555D28 |
Primary button hover | |
Foreground | #555D28 |
Background | transparent |
Border | #555D28 |
Secondary button | |
---|---|
Foreground | #1E1A33 |
Background | #FFFFFF |
Border | #262626 |
Secondary button hover | |
Foreground | #1E1A33 |
Background | hsl(0, 0%, 85%) |
Border | #262626 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme hf-greenbg"></div>
|
Green-Dark-Theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #707B36 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Primary button hover | |
Foreground | #262626 |
Background | #CCCCCC |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #707B36 |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #95A447 |
Border | #FFFFFF |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme green-dark-theme"></div>
|
Moonstone Theme
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | #D8E39C |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #76AEB8 |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #6397A0 |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | #76AEB8 |
Background | #FFFFFF |
Border | #76AEB8 |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #76AEB8 |
Border | #76AEB8 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme moonstone-theme"></div>
|
Light gray - green text
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #555D28 |
Background | #F7F7F7 |
Accent | #555D28 |
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 |
Link button | |
---|---|
Link color | #555D28 |
Link button hover | |
Link hover color | hsl(69.06, 40%, 40%) |
Implementation |
<div class="theme gray-greentext"></div>
|
Light - Border
This is the body text of the theme.
This is the accent color of the theme.
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #707B36 |
Border | #999999 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #95A447 |
Border | #999999 |
Secondary button | |
---|---|
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Secondary button hover | |
Foreground | #707B36 |
Background | hsl(0, 0%, 85%) |
Border | #707B36 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme light-border"></div>
|
Moonstone-blue
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #FFFFFF |
Background | #76AEB8 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #76AEB8 |
Border | #FFFFFF |
Primary button hover | |
Foreground | #FFFFFF |
Background | #6397A0 |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | #76AEB8 |
Background | #FFFFFF |
Border | #76AEB8 |
Secondary button hover | |
Foreground | #FFFFFF |
Background | #76AEB8 |
Border | #76AEB8 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme moonstone-blue"></div>
|
Light gray-warm
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #333333 |
Background | #D7D7D7 |
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 |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme theme-gray-warm"></div>
|
Light trans
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #262626 |
Background | transparent |
Accent | #333333 |
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 | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme light-trans"></div>
|
Base | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #707B36 |
Border | #FFFFFF |
Secondary button | |
---|---|
Foreground | #FFFFFF |
Background | #262626 |
Border | #FFFFFF |
Secondary button hover | |
Foreground | #262626 |
Background | #FFFFFF |
Border | #FFFFFF |
Link button | |
---|---|
Link color | #333333 |
Link button hover | |
Link hover color | hsl(0, 0%, 40%) |
Implementation |
<div class="theme dark-greenbuttons"></div>
|
Base | |
---|---|
Foreground | #333333 |
Background | #F2F2F2 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Primary button hover | |
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Secondary button | |
---|---|
Foreground | #AAAAAA |
Background | #FFFFFF |
Border | #AAAAAA |
Secondary button hover | |
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Focus outline | #CCCCCC |
Implementation |
<div class="theme variant-buttons"></div>
|
Base | |
---|---|
Foreground | #333333 |
Background | #FFFFFF |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #FFFFFF |
Background | #707B36 |
Border | #707B36 |
Primary button hover | |
Foreground | #FFFFFF |
Background | #545C28 |
Border | #545C28 |
Secondary button | |
---|---|
Foreground | #707B36 |
Background | #CCCCCC |
Border | #707B36 |
Secondary button hover | |
Foreground | #545C28 |
Background | #CCCCCC |
Border | #545C28 |
Focus outline | #CCCCCC |
Implementation |
<div class="theme buyonchannel-buttons"></div>
|
White - green text
This is the body text of the theme.
This is the accent color of the theme.
Base | |
---|---|
Foreground | #555D28 |
Background | #FFFFFF |
Accent | #555D28 |
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 | #555D28 |
Link button hover | |
Link hover color | hsl(69.06, 40%, 40%) |
Focus outline | #CCCCCC |
Implementation |
<div class="theme white-greentext"></div>
|
Base | |
---|---|
Foreground | #333333 |
Background | #F2F2F2 |
Accent | #333333 |
Border | transparent |
Primary button | |
---|---|
Foreground | #333333 |
Background | #D1D1D1 |
Border | #333333 |
Primary button hover | |
Foreground | #333333 |
Background | #FFFFFF |
Border | #333333 |
Secondary button | |
---|---|
Foreground | #707B36 |
Background | #FFFFFF |
Border | #707B36 |
Secondary button hover | |
Foreground | #333333 |
Background | #FFFFFF |
Border | #333333 |
Focus outline | #CCCCCC |
Implementation |
<div class="theme variant-buttons-alt"></div>
|