Themes

Take full control of all the colors

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.

Base
Foreground
#333333
Background
#FFFFFF
Accent
#333
Border
#EBEBEB
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.

Base
Foreground
#262626
Background
#FFFFFF
Accent
#333333
Border
#E8E8E8
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>

Dark - green buttons

This is the body text of the theme.

This is the accent color of the theme.

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>

Variant Buttons

This is the body text of the theme.

This is the accent color of the theme.

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
Link button
Link color
#707B36
Link button hover
Link hover color
#272B13
Focus outline
#CCCCCC
Implementation
<div class="theme variant-buttons"></div>

Buy On Channel Buttons

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
#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
Link button
Link color
#707B36
Link button hover
Link hover color
#272B13
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>

Variant Buttons Alternative

This is the body text of the theme.

This is the accent color of the theme.

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
Link button
Link color
#333333
Link button hover
Link hover color
#333333
Focus outline
#CCCCCC
Implementation
<div class="theme variant-buttons-alt"></div>

By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Statistics and Marketing