Themes

Take full control of all the colors
Light
Base
Foreground #2A2F43
Background #FFFFFF
Border none
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #2A2F43
Background #FFFFFF
Border #2A2F43
Hover foreg. #2A2F43
Hover backg. hsl(0, 0%, 85%)
Hover border #2A2F43
Implementation
<div class="theme light"></div>
Dark
Base
Foreground #FFFFFF
Background #262626
Border none
Primary button
Foreground #262626
Background #FFFFFF
Border #FFFFFF
Hover foreg. #FFFFFF
Hover backg. #262626
Hover border #262626
Secondary button
Foreground #FFFFFF
Background #262626
Border #FFFFFF
Hover foreg. #262626
Hover backg. #FFFFFF
Hover border #FFFFFF
Implementation
<div class="theme dark"></div>
Light transparent
Base
Foreground #262626
Background none
Border none
Primary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme light-transparent"></div>
Dark transparent
Base
Foreground #FFFFFF
Background none
Border none
Primary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme dark-transparent"></div>
Light gray
Base
Foreground #000000
Background #F7F7F7
Border none
Primary button
Foreground #FFFFFF
Background #000000
Border #000000
Hover foreg. #000000
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #000000
Background #FFFFFF
Border #000000
Hover foreg. #000000
Hover backg. hsl(0, 0%, 85%)
Hover border #000000
Implementation
<div class="theme theme-gray"></div>
Relekta theme gray border
Base
Foreground #2A2F43
Background #FFFFFF
Border #C9C9C9
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme theme-gray-border"></div>
Relekta Theme
Base
Foreground #000000
Background #FFFFFF
Border #FFFFFF
Primary button
Foreground #FFFFFF
Background #000000
Border #000000
Hover foreg. #000000
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #000000
Background #FFFFFF
Border #000000
Hover foreg. #FFFFFF
Hover backg. #2A2F43
Hover border #2A2F43
Focus outline #CCCCCC
Implementation
<div class="theme theme-new"></div>
Relekta Theme Background Blue
Base
Foreground #FFFFFF
Background #2A2F43
Border none
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #333333
Background #FFFFFF
Border #2A2F43
Hover foreg. #000000
Hover backg. #F8971D
Hover border #F8971D
Focus outline #CCCCCC
Implementation
<div class="theme theme-background-blue"></div>
Relekta Theme Header
Base
Foreground #2A2F43
Background #FFFFFF
Border none
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #333333
Background #FFFFFF
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #2A2F43
Hover border #2A2F43
Focus outline #CCCCCC
Implementation
<div class="theme theme-header-new"></div>
Relekta Theme Background Light Blue
Base
Foreground #2A2F43
Background #9497A1
Border none
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #000000
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #2A2F43
Background #FFFFFF
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #2A2F43
Hover border #2A2F43
Focus outline #CCCCCC
Implementation
<div class="theme theme-background-light-blue"></div>
Relekta PDP Content
Base
Foreground #2A2F43
Background #F2F5F7
Border #FFFFFF
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #2A2F43
Background #FFFFFF
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #2A2F43
Hover border #2A2F43
Focus outline #CCCCCC
Implementation
<div class="theme theme-pdp-content"></div>
Grey with dark blue
Base
Foreground #2A2F43
Background #F2F5F7
Border none
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #000000
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #2A2F43
Background #FFFFFF
Border #2A2F43
Hover foreg. #2A2F43
Hover backg. hsl(0, 0%, 85%)
Hover border #2A2F43
Focus outline #CCCCCC
Implementation
<div class="theme grey-with-dark-blue"></div>
Relekta PDP Carousels
Base
Foreground #2A2F43
Background #FFFFFF
Border #FFFFFF
Primary button
Foreground #FFFFFF
Background #2A2F43
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #F8971D
Hover border #F8971D
Secondary button
Foreground #2A2F43
Background #FFFFFF
Border #2A2F43
Hover foreg. #FFFFFF
Hover backg. #2A2F43
Hover border #2A2F43
Focus outline #CCCCCC
Implementation
<div class="theme theme-pdp-carousel-content"></div>
Relekta Retail Footer
Base
Foreground #FFFFFF
Background #000000
Border none
Primary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme ret-footer"></div>
Relekta Retail Product details
Base
Foreground #FFFFFF
Background #000000
Border none
Primary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground #FFFFFF
Background
Hover foreg. #FFFFFF
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme ret-prod-det"></div>
Relekta Retail Header
Base
Foreground #FFFFFF
Background #000000
Border none
Primary button
Foreground #FFFFFF
Background
Hover foreg. #707070
Hover backg. #707070
Hover border #707070
Secondary button
Foreground #707070
Background
Hover foreg. #707070
Hover backg. hsl(0, 0%, 40%)
Focus outline #707070
Implementation
<div class="theme ret-header"></div>
Genom att trycka på "Acceptera alla" samtycker du till att vi samlar in information om dig för olika ändamål via cookies. Funktionalitet, statistik och marknadsföring
Genom att trycka på "Acceptera alla" samtycker du till att vi samlar in information om dig för olika ändamål via cookies. Funktionalitet, statistik och marknadsföring