Themes

Take full control of all the colors

Like Loveable 1

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

Like Loveable 2

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#E6E569
Background
#003660
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Secondary button
Foreground
#003660
Background
#E6E569
Border
transparent
Secondary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable2"></div>

Like loveable 3

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003660
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
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 likeloveable3"></div>

Like loveable 4

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003660
Background
#F4F8FD
Accent
currentColor
Border
transparent
Primary button
Foreground
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable4"></div>

Like loveable 5

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003660
Background
#F9FAFB
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003660
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#969694
Border
transparent
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
#67826C
Background
#DDE6DE
Border
#67826C
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable5"></div>

Light

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#262626
Background
#FFFFFF
Accent
#333333
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
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>

Light Accent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#343A40
Background
#FFFFFF
Accent
#5500FF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#343A40
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
hsl(210, 10%, 40%)
Border
transparent
Secondary button
Foreground
#5500FF
Background
#EDE6FF
Border
#EDE6FF
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme light-accent"></div>

Dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#343A40
Accent
currentColor
Border
transparent
Primary button
Foreground
#343A40
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#FFFFFF
Background
#262626
Border
#262626
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"></div>

Black

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#0D0E10
Accent
currentColor
Border
transparent
Primary button
Foreground
#0D0E10
Background
#FFFFFF
Border
#FFFFFF
Primary button hover
Foreground
#0D0E10
Background
hsl(0, 0%, 85%)
Border
#FFFFFF
Secondary button
Foreground
#FFFFFF
Background
#0D0E10
Border
#FFFFFF
Secondary button hover
Foreground
#FFFFFF
Background
hsl(220, 10%, 40%)
Border
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme black"></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>

Gul baggrund

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
currentColor
Background
#E6E569
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 gul_baggrund"></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>

Dusty green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#495B49
Accent
#495B49
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#495B49
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#67826C
Border
transparent
Secondary button
Foreground
#495B49
Background
#FFFFFF
Border
#495B49
Secondary button hover
Foreground
#495B49
Background
#CBD6CD
Border
#495B49
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dusty-green"></div>

Dusty-green-transparent

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#343A40
Background
transparent
Accent
#536957
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#67826C
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#67826C
Border
transparent
Secondary button
Foreground
#67826C
Background
#FFFFFF
Border
#67826C
Secondary button hover
Foreground
#5500FF
Background
#EDE6FF
Border
#5500FF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme dusty-green-transparent"></div>

Raaco_blue_yellow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#E6E569
Background
#003660
Accent
#E6E569
Border
transparent
Primary button
Foreground
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Secondary button
Foreground
#E6E569
Background
#003660
Border
transparent
Secondary button hover
Foreground
#E6E569
Background
hsl(206.25, 100%, 40%)
Border
transparent
Focus outline
#CCCCCC
Link button
Link color
#E6E569
Link button hover
Link hover color
hsl(59.52, 71%, 85%)
Focus outline
#CCCCCC
Implementation
<div class="theme raaco_blue_yellow"></div>

Raaco_blue_button

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
#EFEB69
Background
#00306C
Border
transparent
Primary button hover
Foreground
#EFEB69
Background
hsl(213.33, 100%, 40%)
Border
transparent
Secondary button
Foreground
#00306C
Background
#EFEB69
Border
transparent
Secondary button hover
Foreground
#00306C
Background
hsl(58.21, 81%, 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 raaco_blue_button"></div>

raaco demo

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#E6E569
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 raaco-demo"></div>

raaco_1

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
#003660
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#969694
Border
transparent
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
currentColor
Background
transparent
Border
transparent
Focus outline
#497677
Link button
Link color
#497677
Link button hover
Link hover color
hsl(181.3, 24%, 40%)
Focus outline
#497677
Implementation
<div class="theme raaco_1"></div>

raaco blå knap hvid tekst

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#CCCCCC
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003660
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#969694
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
#003660
Link button hover
Link hover color
hsl(206.25, 100%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme raaco_3"></div>

raaco blå baggrund hvid tekst

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#003660
Accent
currentColor
Border
transparent
Primary button
Foreground
#003660
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#003660
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
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme raaco_4"></div>

raaco trans hvid tekst blå knap

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
transparent
Accent
#333333
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003660
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#969694
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 raaco_5"></div>

Header raaco

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003660
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#003660
Background
#FFFFFF
Border
transparent
Primary button hover
Foreground
#003660
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
#003660
Link button
Link color
#003660
Link button hover
Link hover color
hsl(206.25, 100%, 40%)
Focus outline
#003660
Implementation
<div class="theme header_raaco"></div>

Blå tekst blå knap

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003660
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003660
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#969694
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
#003660
Link button hover
Link hover color
hsl(206.25, 100%, 40%)
Focus outline
#CCCCCC
Implementation
<div class="theme theme-new"></div>

Like Loveable 6

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#003660
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Secondary button
Foreground
#003660
Background
#E6E569
Border
transparent
Secondary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable6"></div>

Like loveable 7

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
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
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 likeloveable7"></div>

Like Loveable 8

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#E6E569
Background
transparent
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#003660
Background
#E6E569
Border
transparent
Primary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Secondary button
Foreground
#003660
Background
#E6E569
Border
transparent
Secondary button hover
Foreground
#003660
Background
hsl(59.52, 71%, 85%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable8"></div>

Like loveable 9

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#E6E569
Background
#F9FAFB
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003660
Border
#E6E569
Primary button hover
Foreground
#FFFFFF
Background
#969694
Border
#E6E569
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
#67826C
Background
#DDE6DE
Border
#67826C
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable9"></div>

Like loveable 10

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
#003660
Border
#E6E569
Primary button hover
Foreground
#FFFFFF
Background
#969694
Border
#E6E569
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
#67826C
Background
#DDE6DE
Border
#67826C
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable10"></div>

Like loveable 11

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#003660
Background
#F9FAFB
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#003660
Border
#E6E569
Primary button hover
Foreground
#FFFFFF
Background
#969694
Border
#E6E569
Secondary button
Foreground
currentColor
Background
transparent
Border
transparent
Secondary button hover
Foreground
#67826C
Background
#DDE6DE
Border
#67826C
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme likeloveable11"></div>