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>
Ved å trykke "Godta alle" gir du samtykke til at vi kan samle informasjon om deg for ulike formål via informasjonskapsler. Funksjonalitet, Statistikk og Markedsføring
Ved å trykke "Godta alle" gir du samtykke til at vi kan samle informasjon om deg for ulike formål via informasjonskapsler. Funksjonalitet, Statistikk og Markedsføring