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>

Light gray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F7F7F7
Accent
currentColor
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
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme theme-gray"></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>

djois - standard

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#FFFFFF
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#78B9CD
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#C3ABBF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#C3A2BE
Border
transparent
Focus outline
#36A3AA
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#36A3AA
Implementation
<div class="theme djois-standard"></div>

Djois - top video

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#000000
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
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 djois-top-video"></div>

djois - color background

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#824081
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#36A3AA
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#36A3AA
Implementation
<div class="theme djois-color-background"></div>

djois - category

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#295459
Background
#F5FFFD
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#36A3AA
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#36A3AA
Implementation
<div class="theme djois-category"></div>

Base
Foreground
#737373
Background
#1D1D1D
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#FFFFFF
Implementation
<div class="theme djois-footer"></div>

djois - purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#C3ABBF
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#C3ABBF
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(310, 17%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-purple"></div>

djois - yellow

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#F8EFE0
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#F8EFE0
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(37.5, 63%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-yellow"></div>

djois - green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#ECF7EC
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#ECF7EC
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(120, 41%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-green"></div>

Gray border - pink button

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
#C3ABBF
Background
#FFFFFF
Border
#C3ABBF
Primary button hover
Foreground
#C3ABBF
Background
hsl(0, 0%, 85%)
Border
#C3ABBF
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
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#CCCCCC
Implementation
<div class="theme theme-gray-border-pink-button"></div>

djois - light purple

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#F1E1EB
Accent
currentColor
Border
transparent
Primary button
Foreground
#F6ECF2
Background
#FFFFFF
Border
#000000
Primary button hover
Foreground
#F6ECF2
Background
hsl(0, 0%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-purple-light-purple"></div>

Base
Foreground
#FFFFFF
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#FFFFFF
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
transparent
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#FFFFFF
Border
transparent
Focus outline
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#FFFFFF
Implementation
<div class="theme djois-footer-font"></div>

djois - blue

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#78B9CD
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#C3ABBF
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(310, 17%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-blue"></div>

djois - red

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#CF6478
Accent
currentColor
Border
transparent
Primary button
Foreground
#000000
Background
#C3ABBF
Border
#000000
Primary button hover
Foreground
#000000
Background
hsl(310, 17%, 85%)
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#000000
Implementation
<div class="theme djois-red"></div>

Base
Foreground
#737373
Background
#303030
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#36A3AA
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#4AA9BA
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#924A8E
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
#AA78A7
Border
transparent
Focus outline
#FFFFFF
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Focus outline
#FFFFFF
Implementation
<div class="theme djois-footer-grey-lighter"></div>

Djois product page variant

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#303030
Background
transparent
Accent
currentColor
Border
transparent
Primary button
Foreground
#303030
Background
#FFFFFF
Border
#303030
Primary button hover
Foreground
#FFFFFF
Background
#FFFFFF
Border
#FFFFFF
Secondary button
Foreground
#303030
Background
#FFFFFF
Border
#DBDBDB
Secondary button hover
Foreground
#303030
Background
#FFFFFF
Border
#3D3D3D
Link button
Link color
currentColor
Link button hover
Link hover color
#FFFFFF
Implementation
<div class="theme djois-product-page-variant"></div>

Djois category page

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#303030
Background
transparent
Accent
currentColor
Border
#EAE8ED
Primary button
Foreground
#303030
Background
#FF3030
Border
#303030
Primary button hover
Foreground
#8DFF70
Background
#FF0D0D
Border
#9EFF4A
Secondary button
Foreground
#303030
Background
#A0FF24
Border
#C6DB0B
Secondary button hover
Foreground
#FF3333
Background
#24FF50
Border
#ED874C
Focus outline
#7E29FF
Link button
Link color
#C9FFE2
Link button hover
Link hover color
#FF0000
Focus outline
#7E29FF
Implementation
<div class="theme djois-category-page"></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-3"></div>

Light test

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
#FF2448
Background
#3AF5DB
Border
#224AFF
Primary button hover
Foreground
#FFFFFF
Background
#545454
Border
#545454
Secondary button
Foreground
#000000
Background
#CCCCCC
Border
#000000
Secondary button hover
Foreground
#000000
Background
#F0F0F0
Border
#8C8C8C
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-test"></div>

Tarifold - wgreen

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#009640
Background
#009640
Accent
#009640
Border
#009640
Primary button
Foreground
#000000
Background
#32784D
Border
#000000
Primary button hover
Foreground
#000000
Background
#AED8B8
Border
#000000
Secondary button
Foreground
#000000
Background
#FFFFFF
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(0, 0%, 85%)
Border
transparent
Focus outline
#000000
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#000000
Implementation
<div class="theme tarifold-wtgreen"></div>

Tarifold Light gray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#000000
Background
#E6E6E6
Accent
#E6E6E6
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#009837
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#1B9E47
Border
transparent
Secondary button
Foreground
#FAFAFA
Background
#31AA59
Border
#0A0A0A
Secondary button hover
Foreground
#FAFAFA
Background
hsl(139.83, 55%, 40%)
Border
#0A0A0A
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme tarifold-gray"></div>

Tarifold - dark green

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#00A651
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#00A651
Border
#00A651
Primary button hover
Foreground
#FFFFFF
Background
#009448
Border
#00A651
Secondary button
Foreground
#00A651
Background
#FFFFFF
Border
#00A651
Secondary button hover
Foreground
#FFFFFF
Background
#00A651
Border
#00A651
Focus outline
#000000
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#000000
Implementation
<div class="theme tarifold-darkgreen"></div>

Tarifold - white

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
#009837
Border
transparent
Primary button hover
Foreground
#FAFAFA
Background
#1B9E47
Border
transparent
Secondary button
Foreground
#FFFFFF
Background
#00C748
Border
transparent
Secondary button hover
Foreground
#FFFFFF
Background
hsl(141.71, 100%, 40%)
Border
transparent
Link button
Link color
currentColor
Link button hover
Link hover color
currentColor
Implementation
<div class="theme tarifold-white"></div>

Tarifold main

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#FFFFFF
Background
#00A651
Accent
#FFFFFF
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#A61993
Border
#EFF700
Primary button hover
Foreground
#000000
Background
#EFF700
Border
#2BFF48
Secondary button
Foreground
#00A651
Background
#FFFFFF
Border
#00A651
Secondary button hover
Foreground
#FFFFFF
Background
#00A651
Border
#00A651
Focus outline
#000000
Link button
Link color
#333333
Link button hover
Link hover color
hsl(0, 0%, 40%)
Focus outline
#000000
Implementation
<div class="theme tarifold_main"></div>

Tarifold - light gray + green CTA

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground
#333333
Background
#F7F7F7
Accent
currentColor
Border
transparent
Primary button
Foreground
#FFFFFF
Background
#009837
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#1B9E47
Border
transparent
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 t-light-gray"></div>

Tarifold - Black BG, Green CTA

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
#009837
Border
#009837
Primary button hover
Foreground
#FFFFFF
Background
#00A83D
Border
#00A83D
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 tarifold-dark-filter"></div>

Transparent BG+white text+Grey CTA

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
#666666
Border
transparent
Primary button hover
Foreground
#FFFFFF
Background
#707070
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 tarifold-dark-transparent"></div>

By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Functionality, Statistics and Marketing