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	#333333
Background	#FFFFFF
Accent	#9E9E9E
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#3AAF7C
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#48D99A
Border	#48D99A

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	#F7F7F7
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 light"></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	#A60000
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 dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#000000
Accent	#EBEBEB
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 greywithgreentext

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#10B981
Background	#F7F7F7
Accent	#333333
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
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 greywithgreentext"></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	#10B981
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
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 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	currentColor
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 button2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#333333
Border	#CFCFCF

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

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#FFFFFF
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#FFFFFF
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 transparentbutton2"></div>

Theme transparent button

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	transparent
Border	transparent
Primary button hover
Foreground	#DBFFDF
Background	transparent
Border	transparent

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#FFFFFF
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	#FFFFFF
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 transparentbutton"></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 transparent with trans buttons

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	transparent
Border	transparent
Primary button hover
Foreground	#D1D1D1
Background	transparent
Border	transparent

Secondary button
Foreground	#F5F5F5
Background	transparent
Border	transparent
Secondary button hover
Foreground	#E8E8E8
Background	transparent
Border	transparent

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

Implementation


									<div class="theme transparentbackgroundbuttons"></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	#F0D851
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>

Rainbow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#99424A
Background	#FF6E7C
Accent	#BDB548
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
Focus outline	#FF1303

Link button
Link color	#66FFE6
Link button hover
Link hover color	hsl(170.2, 100%, 85%)
Focus outline	#FF1303

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	#333333
Background	#FFFFFF
Accent	#333333
Border	#F7F7F7

Primary button
Foreground	#FFFFFF
Background	#3AAF7C
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#4FEDA8
Border	transparent

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	#F7F7F7
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 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	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 blue"></div>

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

Primary button
Foreground	#FFFFFF
Background	#000000
Border	#FFFFFF
Primary button hover
Foreground	#FFFFFF
Background	#E0E0E0
Border	#FFFFFF

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	#E0E0E0
Border	#FFFFFF
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 theme-cookie"></div>

Theme green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#3AAF7C
Accent	#9DD493
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

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#495B70
Accent	#7E9EC2
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	#EDCF6B
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>

Grey border

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	currentColor
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	#CCCCCC
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent
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 grey-border"></div>

VariantSelector

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#333333
Background	#EDEDED
Border	#333333
Primary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
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 variantselector"></div>

Buttons

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#FFFFFF
Background	#4D4D4D
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 buttons"></div>

copytest

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	#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	#333333
Link button hover
Link hover color	hsl(0, 0%, 40%)
Focus outline	#CCCCCC

Implementation


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

Themes

Theme light

Theme red

Theme dark

Theme greywithgreentext

Theme grey

Theme light background transparent

Theme dark transparent

Theme transparent button2

Theme transparent button

Theme transparent

Theme transparent with trans buttons

Theme olive

Rainbow

Theme light with border

Theme blue

Theme cookie

Theme green

Theme blue

Theme sand

Grey border

VariantSelector

Buttons

copytest