Themes

Take full control of all the colors

Light Black

This is the body text of the theme.

Base
Foreground
#333333
Background
#FFFFFF
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
Implementation
<div class="theme theme-ro"></div>

Dark

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#262626
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
Implementation
<div class="theme dark"></div>

Dark transparent

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
transparent
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
Implementation
<div class="theme dark-transparent"></div>

Light gray

This is the body text of the theme.

Base
Foreground
#333333
Background
#F7F7F7
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
Implementation
<div class="theme theme-gray"></div>

No theme

This is the body text of the theme.

Base
Foreground
currentColor
Background
transparent
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
Implementation
<div class="theme theme-nothemes"></div>

Base
Foreground
#333333
Background
#FFFFFF
Border
#000000
Primary button
Foreground
#000000
Background
#FFFFFF
Border
#000000
Primary button hover
Foreground
#FFFFFF
Background
#000000
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
Implementation
<div class="theme header-signin"></div>

Green Background

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#418613
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#418613
Border
transparent
Primary button hover
Foreground
#418613
Background
#FFFFFF
Border
#418613
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Implementation
<div class="theme theme-greenbg"></div>

no theme with border

This is the body text of the theme.

Base
Foreground
#333333
Background
#FFFFFF
Border
#E6E6E6
Primary button
Foreground
#030303
Background
#FFFFFF
Border
#E6E6E6
Primary button hover
Foreground
#030303
Background
hsl(0, 0%, 85%)
Border
#E6E6E6
Secondary button
Foreground
#333333
Background
#CCCCCC
Border
transparent
Secondary button hover
Foreground
#333333
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#CCCCCC
Implementation
<div class="theme theme-greyborder"></div>

Black

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#000000
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
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
currentColor
Background
transparent
Border
transparent
Implementation
<div class="theme theme-black"></div>

Light transparent

This is the body text of the theme.

Base
Foreground
#FFFFFF
Background
#262626
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#262626
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#262626
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#262626
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#262626
Border
transparent
Implementation
<div class="theme light-transparent"></div>

SignIn Theme

This is the body text of the theme.

Base
Foreground
#333333
Background
#FFFFFF
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
Implementation
<div class="theme theme-signintheme"></div>

StandardParaTheme

This is the body text of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#55A122
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(95.91, 65%, 40%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#55A122
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(95.91, 65%, 40%)
Border
transparent
Implementation
<div class="theme standardparatheme"></div>

GreyBGTheme

This is the body text of the theme.

Base
Foreground
#000000
Background
#FAFAFA
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#000000
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#000000
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 40%)
Border
transparent
Implementation
<div class="theme greybgtheme"></div>

SFRI Theme

This is the body text of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Border
#FFFFFF
Primary button
Foreground
#000000
Background
#FFFFFF
Border
#000000
Primary button hover
Foreground
#FFFFFF
Background
#55A122
Border
#55A122
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
#000000
Secondary button hover
Foreground
#FFFFFF
Background
#55A122
Border
#55A122
Focus outline
#000000
Implementation
<div class="theme sfrit"></div>

Green for testing SFRI

This is the body text of the theme.

Base
Foreground
#333333
Background
#726F87
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
Implementation
<div class="theme theme-new"></div>