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

Primary button
Foreground	#FFFFFF
Background	#262626
Border	#262626
Primary button hover
Foreground	#FFFFFF
Background	#545454
Border	#545454

Secondary button
Foreground	#1E1A33
Background	#FFFFFF
Border	#262626
Secondary button hover
Foreground	#1E1A33
Background	hsl(0, 0%, 85%)
Border	#262626

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

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	currentColor
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	currentColor
Link button hover
Link hover color	currentColor

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	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 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	currentColor
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	currentColor
Link button hover
Link hover color	currentColor

Implementation


									<div class="theme dark-transparent"></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	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	#FFFFFF
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-gray-border"></div>

Theme khaki

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#BEBF9F
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 theme-khaki"></div>

Theme palegold

This is the body text of the theme.

This is the accent color of the theme.

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

Implementation


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

Theme paletaupe

This is the body text of the theme.

This is the accent color of the theme.

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

Implementation


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

Yellow-orange

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#262626
Background	#FFCB1F
Accent	currentColor
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	currentColor
Link button hover
Link hover color	currentColor

Implementation


									<div class="theme yellow-orange"></div>

Dark-red

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#AD0000
Accent	currentColor
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	currentColor
Link button hover
Link hover color	currentColor

Implementation


									<div class="theme dark-red"></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	currentColor
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	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#CCCCCC

Implementation


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

Dark-red button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#262626
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#AD0000
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#7A0000
Border	transparent

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#262626
Background	#FFFFFF
Border	#FFFFFF

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

Implementation


									<div class="theme dark-redbutton"></div>

Spira Green header/footer

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#F1F1F1
Background	#466445
Accent	#466445
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	#FFFFFF
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(0, 0%, 85%)
Border	transparent
Focus outline	#CCCCCC

Link button
Link color	#FFFFFF
Link button hover
Link hover color	hsl(0, 0%, 85%)
Focus outline	#CCCCCC

Implementation


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

Spira frontpage boxes

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#F1F1F1
Background	#466445
Accent	#466445
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#466445
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#3F4530
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 spirafpboxes"></div>

Spira frontpage top

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	#F1F1E4
Accent	#466445
Border	transparent

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

Spira buy button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#000000
Background	transparent
Accent	#466445
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#466445
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#3B543A
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 spirabuybutton"></div>

Spira Blommor Article

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#E5E9E0
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#3D6638
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	hsl(113,48, 29%, 40%)
Border	transparent

Secondary button
Foreground	#333333
Background	#E5E9E0
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(86,67, 17%, 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 theme-new"></div>

HeroTheme

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#333333
Background	#E5E9E0
Border	transparent
Primary button hover
Foreground	#333333
Background	#F4F7F0
Border	transparent

Secondary button
Foreground	#333333
Background	#F4F7F0
Border	transparent
Secondary button hover
Foreground	#333333
Background	#F4F7F0
Border	transparent
Focus outline	#CCCCCC

Link button
Link color	#52792F
Link button hover
Link hover color	#6F9747
Focus outline	#CCCCCC

Implementation


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

Spira_official_paragraph

This is the body text of the theme.

This is the accent color of the theme.

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

Primary button
Foreground	#FAFAFA
Background	#3D6638
Border	transparent
Primary button hover
Foreground	#FAFAFA
Background	#7FAD52
Border	transparent

Secondary button
Foreground	#333333
Background	#F4F7F0
Border	transparent
Secondary button hover
Foreground	#333333
Background	#F4F7F0
Border	transparent
Focus outline	#CCCCCC

Link button
Link color	#52792F
Link button hover
Link hover color	#6F9747
Focus outline	#CCCCCC

Implementation


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