Themes

Take full control of all the colors

Light

This is the body text of the theme.

Base
Foreground	#002856
Background	#FFFFFF
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#002856
Background	transparent
Border	#002856
Secondary button hover
Foreground	#FFFFFF
Background	#002856
Border	#002856
Focus outline	#0099CC

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#0099CC

Implementation


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

Light transparent

This is the body text of the theme.

Base
Foreground	#002856
Background	transparent
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#0099CC
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


									<div class="theme light-transparent"></div>

Dark transparent

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	transparent
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B9F5
Border	#00B9F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#0099CC
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#00B9F5

Link button
Link color	#00B9F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B9F5

Implementation


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

Light with dark blue border

This is the body text of the theme.

Base
Foreground	#002856
Background	#FFFFFF
Accent	#00B8F5
Border	#002856

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#002856
Background	transparent
Border	#002856
Secondary button hover
Foreground	#FFFFFF
Background	#002856
Border	#002856
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


									<div class="theme theme-darkblue-border"></div>

Light Grey

This is the body text of the theme.

Base
Foreground	#002856
Background	#EDEDED
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#002856
Background	transparent
Border	#002856
Secondary button hover
Foreground	#FFFFFF
Background	#002856
Border	#002856
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


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

Dark Grey - Dark Text

This is the body text of the theme.

Base
Foreground	#002856
Background	#D0D0D0
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#002856
Background	transparent
Border	#002856
Secondary button hover
Foreground	#FFFFFF
Background	#002856
Border	#002856
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


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

Dark Grey - Light Text

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#D0D0D0
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#0099CC
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


									<div class="theme light-dark-grey"></div>

Dark blue

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#002755
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B9F5
Border	#00B9F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#002755
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#00B9F5

Link button
Link color	#00B9F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B9F5

Implementation


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

Blue

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#0D377F
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B9F5
Border	#00B9F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#0D377F
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#00B9F5

Link button
Link color	#00B9F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B9F5

Implementation


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

Light Blue

This is the body text of the theme.

Base
Foreground	#FFFFFF
Background	#00B9F5
Accent	#0D377F
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#0D377F
Border	#0D377F
Primary button hover
Foreground	#FFFFFF
Background	#002755
Border	#002755

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#0099CC
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#002755

Link button
Link color	#0D377F
Link button hover
Link hover color	#002755
Focus outline	#002755

Implementation


									<div class="theme light-blue"></div>

Light blue button

This is the body text of the theme.

Base
Foreground	#002856
Background	#FFFFFF
Accent	#00B9F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B9F5
Border	#00B9F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#FFFFFF
Background	transparent
Border	#FFFFFF
Secondary button hover
Foreground	#002856
Background	#FFFFFF
Border	#FFFFFF
Focus outline	#00B9F5

Link button
Link color	currentColor
Link button hover
Link hover color	currentColor
Focus outline	#00B9F5

Implementation


									<div class="theme light-bluebutton"></div>

Transparent with dark blue border

This is the body text of the theme.

Base
Foreground	#002856
Background	transparent
Accent	#00B9F5
Border	#002856

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#002856
Background	transparent
Border	#002856
Secondary button hover
Foreground	#FFFFFF
Background	#002856
Border	#002856
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


									<div class="theme theme-transparent-darkblue-border"></div>

Darken image

This is the body text of the theme.

Base
Foreground	#000000
Background	#000000
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 theme-darkenimage"></div>

Lighter Grey

This is the body text of the theme.

Base
Foreground	#002856
Background	#F5F5F5
Accent	#00B8F5
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#00B8F5
Border	#00B8F5
Primary button hover
Foreground	#FFFFFF
Background	#0099CC
Border	#0099CC

Secondary button
Foreground	#002856
Background	transparent
Border	#002856
Secondary button hover
Foreground	#FFFFFF
Background	#002856
Border	#002856
Focus outline	#00B8F5

Link button
Link color	#00B8F5
Link button hover
Link hover color	#0099CC
Focus outline	#00B8F5

Implementation


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