Themes

Take full control of all the colors

New-theme

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	#FCFCFC
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#C1D82F
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#9AAD26
Border	transparent

Secondary button
Foreground	#C1D82F
Background	#CCCCCC
Border	#C1D82F
Secondary button hover
Foreground	#9AAD26
Background	hsl(0, 0%, 85%)
Border	#9AAD26
Focus outline	#3A3A3C

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#3A3A3C

Implementation


									<div class="theme new-theme"></div>

WhiteBG-GreenCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	#FFFFFF
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#C1D82F
Border	#C1D82F
Primary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18

Secondary button
Foreground	#9AAD26
Background	#FFFFFF
Border	#9AAD26
Secondary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18
Focus outline	#CCCCCC

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#CCCCCC

Implementation


									<div class="theme whitebg-greencta"></div>

WhiteBG-GreyCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	#FFFFFF
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#919195
Border	#919195
Primary button hover
Foreground	#FFFFFF
Background	#49494B
Border	#49494B

Secondary button
Foreground	#747477
Background	#FFFFFF
Border	#747477
Secondary button hover
Foreground	#FFFFFF
Background	#49494B
Border	#49494B
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 whitebg-greycta"></div>

LightGreenBG-GreenCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	#F9FBEA
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#C1D82F
Border	#C1D82F
Primary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18

Secondary button
Foreground	#9AAD26
Background	#FFFFFF
Border	#9AAD26
Secondary button hover
Foreground	#616C18
Background	#FFFFFF
Border	#616C18
Focus outline	#CCCCCC

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#CCCCCC

Implementation


									<div class="theme lightgreenbg-greencta"></div>

LightGreyBG-GreenCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	#F7F7F7
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#C1D82F
Border	#C1D82F
Primary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18

Secondary button
Foreground	#9AAD26
Background	#FFFFFF
Border	#9AAD26
Secondary button hover
Foreground	#616C18
Background	#FFFFFF
Border	#616C18
Focus outline	#CCCCCC

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#CCCCCC

Implementation


									<div class="theme lightgreybg-greencta"></div>

TransparentBG-GreenCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	#FFFFFF
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#C1D82F
Border	#C1D82F
Primary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18

Secondary button
Foreground	#9AAD26
Background	#FFFFFF
Border	#9AAD26
Secondary button hover
Foreground	#616C18
Background	#FFFFFF
Border	#616C18
Focus outline	#FF29F8

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#FF29F8

Implementation


									<div class="theme transparentbg-greencta"></div>

TransparentBG-GreyCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#3A3A3C
Background	transparent
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#919195
Border	#919195
Primary button hover
Foreground	#FFFFFF
Background	#49494B
Border	#49494B

Secondary button
Foreground	#747477
Background	#FFFFFF
Border	#747477
Secondary button hover
Foreground	#FFFFFF
Background	#49494B
Border	#49494B

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor

Implementation


									<div class="theme transparentbg-greycta"></div>

GreenBG-GreenCTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#C1D82F
Accent	#333333
Border	transparent

Primary button
Foreground	#C1D82F
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18

Secondary button
Foreground	#FFFFFF
Background	#616C18
Border	#616C18
Secondary button hover
Foreground	#FFFFFF
Background	#C1D82F
Border	#C1D82F
Focus outline	#CCCCCC

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#CCCCCC

Implementation


									<div class="theme greenbg-greencta"></div>

TransparentBG-GreenCTA-2

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	#FFFFFF
Background	#C1D82F
Border	#C1D82F
Primary button hover
Foreground	#FFFFFF
Background	#616C18
Border	#616C18

Secondary button
Foreground	#9AAD26
Background	#FFFFFF
Border	#9AAD26
Secondary button hover
Foreground	#616C18
Background	#FFFFFF
Border	#616C18
Focus outline	#00FFFF

Link button
Link color	#9AAD26
Link button hover
Link hover color	#C1D82F
Focus outline	#00FFFF

Implementation


									<div class="theme transparentbg-greencta-2"></div>