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	#3755B8
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#1F301A
Border	#1F301A
Primary button hover
Foreground	#FFFFFF
Background	hsl(106.36, 30%, 40%)
Border	#1F301A

Secondary button
Foreground	#1F301A
Background	#FFFFFF
Border	#1F301A
Secondary button hover
Foreground	#1F301A
Background	hsl(0, 0%, 85%)
Border	#1F301A
Focus outline	#CCCCCC

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

Implementation


									<div class="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	#B50E1F
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 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	#741896
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	#8312C4
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#FFFFFF

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	#639953
Border	transparent

Primary button
Foreground	#E82F13
Background	#209C17
Border	#FFFFFF
Primary button hover
Foreground	#0AFF43
Background	#FF19FF
Border	#FFF93D

Secondary button
Foreground	#FFFFFF
Background	#314D29
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	hsl(106.67, 31%, 40%)
Border	#FFFFFF
Focus outline	#CCCCCC

Link button
Link color	#E82F13
Link button hover
Link hover color	#E8CB6B
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	#F2DA52
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	#8454E3
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	#FF08D6
Border	#44FA6E

Primary button
Foreground	#38E30E
Background	#417845
Border	#A7FA00
Primary button hover
Foreground	#218508
Background	#6DC974
Border	#689C00

Secondary button
Foreground	#47ABED
Background	#0E44A1
Border	#07CEED
Secondary button hover
Foreground	#193D54
Background	#1567F5
Border	#047C8F

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

Implementation


									<div class="theme rainbow"></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	#333333
Primary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 40%)
Border	#333333

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	#FF3F38
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	#1F301A
Accent	currentColor
Border	#73B361

Primary button
Foreground	#1F301A
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>

Theme lightwithredbutton

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	#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 dark green 2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#446939
Accent	currentColor
Border	transparent

Primary button
Foreground	#446939
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#446939
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 darkgreen2"></div>

Theme black friday

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	#000000
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#000000
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-blackfriday"></div>

Theme red

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#FF0000
Accent	#FFB3B0
Border	transparent

Primary button
Foreground	#000000
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#000000
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 red"></div>

Theme black-darkgreen

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#446939
Background	#000000
Accent	currentColor
Border	transparent

Primary button
Foreground	#446939
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#0AFF43
Background	#FF19FF
Border	#FFF93D

Secondary button
Foreground	#FFFFFF
Background	#314D29
Border	#FFFFFF
Secondary button hover
Foreground	#FFFFFF
Background	hsl(106.67, 31%, 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 black-darkgreen"></div>

Theme green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#40573C
Accent	#B8FAAC
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 theme-green"></div>

Theme blue X

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#495B70
Accent	#7B99BD
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 theme-blue"></div>

Theme sand

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#87763D
Accent	#DBC063
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	#E6E6E6
Border	#333333
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#333333

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

Implementation


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

Theme blue with border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#78A9F5
Accent	currentColor
Border	#3D567D

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 bluewithborder"></div>

Theme MAK theme

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333
Background	#fff
Accent	currentColor
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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#cccccc

Implementation


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

Theme red2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#FF0000
Accent	#FFDAD6
Border	transparent

Primary button
Foreground	#000000
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#000000
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 red2"></div>

Rosa

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#FF6982
Accent	#CC5468
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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme rosa"></div>

Blue2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#78A9F5
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 blue2"></div>

Light Yellow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FBF7ED
Accent	#267F60
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#267F60
Border	#267F60
Primary button hover
Foreground	#FFFFFF
Background	hsl(159.1, 54%, 40%)
Border	#267F60

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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme lightyellow"></div>

Green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#124C3F
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#124C3F
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	hsl(166.55, 62%, 40%)
Border	#FFFFFF

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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme green"></div>

Eyebrow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#222F5C
Background	#FCFCFC
Accent	#005EFF
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#425BB3
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(226.73, 46%, 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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


									<div class="theme eyebrow"></div>

Theme transparent trans button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	transparent
Accent	#8312C4
Border	transparent

Primary button
Foreground	#FFFFFF
Background	transparent
Border	transparent
Primary button hover
Foreground	#EBEBEB
Background	transparent
Border	transparent

Secondary button
Foreground	#D6D6D6
Background	transparent
Border	transparent
Secondary button hover
Foreground	#C7C7C7
Background	transparent
Border	transparent

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

Implementation


									<div class="theme transparentbackgroundbutton"></div>

Themes

Theme light

Theme dark

Theme grey

Theme light background transparent

Theme dark transparent

Theme transparent

Theme dark green

Theme olive

Theme White font

Rainbow

Theme light with border

Theme blue

Theme cookie

Theme dark green with border

Theme olivetext

Theme dark green font

Theme lightwithredbutton

Theme dark green 2

Theme black friday

Theme red

Theme black-darkgreen

Theme green

Theme blue X

Theme sand

Theme blue with border

Theme MAK theme

Theme red2

Rosa

Blue2

Light Yellow

Green

Eyebrow

Theme transparent trans button