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	#303030
Background	#FFFFFF
Border	#FFFFFF
Primary button hover
Foreground	#303030
Background	#F0F0F0
Border	#FFFFFF

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>

Base
Foreground	#333333
Background	#82817F
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-menu-top"></div>

Theme Matas

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#EFEDEA
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-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	#375438
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>

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	#FFFFFF
Background	#DFC79D
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#E6CDA2
Border	transparent

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>

Very Light gray

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FCFCFC
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 very-light-gray"></div>

Djois product page variant NEW

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	#EDEDED
Border	#303030
Primary button hover
Foreground	#FFFFFF
Background	#DB1A6E
Border	#FFFFFF

Secondary button
Foreground	#303030
Background	transparent
Border	#DBDBDB
Secondary button hover
Foreground	#303030
Background	#FFFFFF
Border	#303030

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

Implementation


									<div class="theme djois-website-product-page-variant-new"></div>

Buttons help product page

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#FFFFFF
Accent	#333333
Border	#EBEBEB

Primary button
Foreground	#17556D
Background	#E0EAEE
Border	transparent
Primary button hover
Foreground	#17556D
Background	#E0EAEE
Border	#17556D

Secondary button
Foreground	#333333
Background	#FFFFFF
Border	#333333
Secondary button hover
Foreground	#333333
Background	#F7F7F7
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 buttons_product_page"></div>

Publication download button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#17556D
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#17556D
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#1D6D8C
Border	transparent

Secondary button
Foreground	#262626
Background	#FFFFFF
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#17556D
Border	#FFFFFF
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 publication_download_button-main-djois"></div>

Black 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	#E0E0E0

Primary button
Foreground	#FFFFFF
Background	#333333
Border	#FF1C6F
Primary button hover
Foreground	#333333
Background	#F52269
Border	#333333

Secondary button
Foreground	#333333
Background	#EB1A4B
Border	#FF086B
Secondary button hover
Foreground	#FF0F37
Background	#FF1F69
Border	#FF2448
Focus outline	#FF293E

Link button
Link color	#FF2474
Link button hover
Link hover color	#FF2164
Focus outline	#FF293E

Implementation


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

Base
Foreground	#17556D
Background	#E0EAEE
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#17556D
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#1D6D8C
Border	transparent

Secondary button
Foreground	#262626
Background	#FFFFFF
Border	transparent
Secondary button hover
Foreground	#FFFFFF
Background	#17556D
Border	#FFFFFF
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 djois-footer-2023"></div>

Djois Footer dark

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#17556D
Accent	#17556D
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#333333
Background	#FFFFFF
Border	#333333

Secondary button
Foreground	#333333
Background	#17556D
Border	transparent
Secondary button hover
Foreground	#333333
Background	hsl(196,74, 65%, 40%)
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 djois_footer_dark"></div>

Djois main blue button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#1D6D8C
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#17556D
Border	transparent

Secondary button
Foreground	#1D6D8C
Background	#E0EAEE
Border	transparent
Secondary button hover
Foreground	#1D6D8C
Background	#DAE4E8
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 djois_main_blue_button"></div>

Djois product page variant blue border

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	#E8E8E8
Border	#303030
Primary button hover
Foreground	#303030
Background	hsl(0, 0%, 85%)
Border	#303030

Secondary button
Foreground	#303030
Background	#FFFFFF
Border	#C2C2C2
Secondary button hover
Foreground	#303030
Background	#FFFFFF
Border	#303030

Link button
Link color	#FFFFFF
Link button hover
Link hover color	#FFFFFF

Implementation


									<div class="theme djois-website-product-page-variant-blue-border"></div>

Djois green Djois com

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#146907
Background	#ECF7EC
Accent	currentColor
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#146907
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#1A8709
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 djois_green_djois_com"></div>

Yellow button for parallax

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	#000000
Background	#ECDA5C
Border	transparent
Primary button hover
Foreground	#000000
Background	#E8D65A
Border	transparent

Secondary button
Foreground	#262626
Background	#F7F7F7
Border	transparent
Secondary button hover
Foreground	#262626
Background	#EDEDED
Border	transparent

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

Implementation


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

Greenf or slider 1

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#06A384
Accent	currentColor
Border	transparent

Primary button
Foreground	#000000
Background	#ECDA5C
Border	transparent
Primary button hover
Foreground	#000000
Background	#E8D65A
Border	transparent

Secondary button
Foreground	#262626
Background	#F7F7F7
Border	transparent
Secondary button hover
Foreground	#262626
Background	#EDEDED
Border	transparent

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

Implementation


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

Blue for slider 1

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#FFFFFF
Background	#3F7688
Accent	currentColor
Border	transparent

Primary button
Foreground	#000000
Background	#ECDA5C
Border	transparent
Primary button hover
Foreground	#000000
Background	#E8D65A
Border	transparent

Secondary button
Foreground	#262626
Background	#F7F7F7
Border	transparent
Secondary button hover
Foreground	#262626
Background	#EDEDED
Border	transparent

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

Implementation


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

Mobile header button

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	transparent
Accent	#333333
Border	transparent

Primary button
Foreground	#FFFFFF
Background	#FFFFFF
Border	#333333
Primary button hover
Foreground	#FFFFFF
Background	hsl(0, 0%, 85%)
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 mobile_header_button"></div>

Light gray for sub family

This is the body text of the theme.

This is the accent color of the theme.

Base
Foreground	#333333
Background	#F2F2F2
Accent	currentColor
Border	transparent

Primary button
Foreground	#333333
Background	#FFFFFF
Border	transparent
Primary button hover
Foreground	#FFFFFF
Background	#333333
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 light-gray-sub-famuly"></div>

Djois green 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	#146907
Background	#ECF7EC
Border	transparent
Primary button hover
Foreground	#146907
Background	#ECF7EC
Border	#146907

Secondary button
Foreground	#333333
Background	#F5F5F5
Border	#F5F5F5
Secondary button hover
Foreground	#333333
Background	#F5F5F5
Border	#C9C9C9
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 djois-green-button"></div>

Themes

Light

Dark

Light transparent

Dark transparent

Light gray

Gray border

Theme Top Menu

Theme Matas

Theme palegold

Theme paletaupe

Yellow-orange

Dark-red

Dark green

Dark-red button

djois - standard

Djois - top video

djois - color background

djois - category

djois - footer

djois - purple

djois - yellow

djois - green

Gray border - pink button

djois - light purple

djois - footer font

djois - blue

djois - red

djois - footer grey lighter

Djois product page variant

Djois category page

Very Light gray

Djois product page variant NEW

Buttons help product page

Publication download button

Black border

Djois Footer 2023

Djois Footer dark

Djois main blue button

Djois product page variant blue border

Djois green Djois com

Yellow button for parallax

Greenf or slider 1

Blue for slider 1

Mobile header button

Light gray for sub family

Djois green button