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	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
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-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	transparent
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>

Favorites button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#F2F2F2
Accent	#FFFFFF
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#D1D1D1
Border	#FFFFFF
Primary button hover
Foreground	#333333
Background	#FFFFFF
Border	#333333

Secondary button
Foreground	#707B36
Background	#FFFFFF
Border	#707B36
Secondary button hover
Foreground	#FFFFFF
Background	#707B36
Border	#FFFFFF
Focus outline	#CCCCCC

Link button
Link color	#FFFFFF
Link button hover
Link hover color	#FFFFFF
Focus outline	#CCCCCC

Implementation


									<div class="theme fav-button"></div>

Nav Buttons

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#717C37
Background	transparent
Border	transparent
Primary button hover
Foreground	#333333
Background	transparent
Border	transparent

Secondary button
Foreground	#CCCCCC
Background	transparent
Border	transparent
Secondary button hover
Foreground	#717C37
Background	transparent
Border	transparent
Focus outline	#CCCCCC

Link button
Link color	#717C37
Link button hover
Link hover color	#333333
Focus outline	#CCCCCC

Implementation


									<div class="theme nav-buttons"></div>

Base
Foreground	#262626
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#EB7A69
Background	#FFFFFF
Border	#EB7A69
Primary button hover
Foreground	#FFFFFF
Background	#EB7A69
Border	#FFFFFF

Secondary button
Foreground	#76AEB8
Background	#FFFFFF
Border	#76AEB8
Secondary button hover
Foreground	#FFFFFF
Background	#76AEB8
Border	#76AEB8
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 menu-button-theme"></div>

Dark with 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	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	#707B36
Border	#707B36

Secondary button
Foreground	#FFFFFF
Background	#262626
Border	#FFFFFF
Secondary button hover
Foreground	#262626
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#CCCCCC

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme dark-with-green-buttons"></div>

Themes

Light

Dark

Light transparent

Dark transparent

Light gray

Black

Gray border

Dark-Peach

neutral-gray

Dark green

Warm-Gray

Green background

Green-Dark-Theme

Moonstone Theme

Light gray - green text

Light - Border

Moonstone-blue

Light gray-warm

Light trans

Dark - green buttons

Variant Buttons

Buy On Channel Buttons

White - green text

Variant Buttons Alternative

Favorites button

Nav Buttons

Menu Button Theme

Dark with Green Buttons