Themes

Take full control of all the colors
No theme
Base
Foreground #2F284C
Background none
Border #2F284C
Primary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Secondary button
Foreground
Background
Hover backg. hsl(0, 0%, 40%)
Implementation
<div class="theme notheme"></div>
VS Purple background
Base
Foreground #FFFFFF
Background #2F284D
Border #2F284D
Primary button
Foreground #F15836
Background #2F284D
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #F17D59
Hover border #F17D59
Secondary button
Foreground #000000
Background #FFFFFF
Border #FFFFFF
Hover foreg. #000000
Hover backg. #DEDEDE
Hover border #DEDEDE
Implementation
<div class="theme vs-purple-background"></div>
VS Yellow background
Base
Foreground #2F284D
Background #FFCC3E
Border #FFCC3E
Primary button
Foreground #F15836
Background #FFCC3E
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme vs-yellow-background"></div>
VS White background
Base
Foreground #2F284D
Background #FFFFFF
Border #FFFFFF
Primary button
Foreground #F15836
Background #FFFFFF
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme vs-white-background"></div>
VS Yellow Carousel
Base
Foreground #2F284D
Background #FFCC3E
Border #FFCC3E
Primary button
Foreground #2F284D
Background #FFCC3E
Border #FFCC3E
Hover foreg. #F15836
Hover backg. #FFCC3E
Hover border #FFCC3E
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-yellow-carousel"></div>
VS White background - Grey border
Base
Foreground #2F284D
Background #FFFFFF
Border #AFAFAF
Primary button
Foreground #F15836
Background #FFFFFF
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-white-background-grey-border"></div>
VS Light gray
Base
Foreground #2F284D
Background #F7F7F7
Border none
Primary button
Foreground #F15836
Background #FFFFFF
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Implementation
<div class="theme theme-gray"></div>
VS Yellow Background With Sun
Base
Foreground #2F284D
Background #FFCC3E
Border #FFCC3E
Primary button
Foreground #F15836
Background #FFFFFF
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-yellow-background-with-sun"></div>
VS Green Image Background
Base
Foreground #FFFFFF
Background #6AB49B
Border none
Primary button
Foreground #F15836
Background #FFFFFF
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-green-image-background"></div>
VS accordion
Base
Foreground #F15836
Background #FFFFFF
Border none
Primary button
Foreground #F15836
Background #FFFFFF
Border #F15836
Hover foreg. #FFFFFF
Hover backg. #FF957A
Hover border #FF957A
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-accordion"></div>
VS Our team
Base
Foreground #CCCCCC
Background #FFFFFF
Border #FFFFFF
Primary button
Foreground #2F284D
Background #FFFFFF
Border #FFFFFF
Hover foreg. #F15836
Hover backg. #FFFFFF
Hover border #FFFFFF
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-our-team"></div>
VS Orange Background
Base
Foreground #FFFFFF
Background #F15836
Border #F15836
Primary button
Foreground #FFFFFF
Background #F15836
Border #FFFFFF
Hover foreg. #F15836
Hover backg. #D9D9D9
Hover border #D9D9D9
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme vs-orange-background"></div>
VS Darkpurple Background
Base
Foreground #FFFFFF
Background #292147
Border #292147
Primary button
Foreground #292147
Background #FFFFFF
Hover foreg. #292147
Hover backg. hsl(0, 0%, 85%)
Secondary button
Foreground #333333
Background #CCCCCC
Hover foreg. #333333
Hover backg. hsl(0, 0%, 85%)
Focus outline #CCCCCC
Implementation
<div class="theme theme-darkpurple"></div>
By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Functionality, Statistics and Marketing
By clicking 'Accept All' you consent that we may collect information about you for various purposes, including: Functionality, Statistics and Marketing